Dostosuj pozycję obrazu stylu listy?

Question

Czy istnieje sposób na dostosowanie położenia obrazu w stylu listy?

Kiedy używać dopełnienie dla elementów listy obraz pozostanie na swoim stanowisku i nie ruszy z wyściółką ...

Answer 1

Niezupełnie. Twoje dopełnienie (prawdopodobnie) jest stosowane do elementu listy, więc będzie miało wpływ tylko na faktyczną zawartość elementu listy.

Za pomocą kombinacji tle i wyściółka style można stworzyć coś, co wygląda podobnie na przykład

li { 
    background: url(images/bullet.gif) no-repeat left top; 
    padding: 3px 0px 3px 10px; 
    /* reset styles (optional): */ 
    list-style: none; 
    margin: 0; 
} 

Być może chce dodać stylizacji do pojemnika listy rodzic (UL), aby umieścić swoje punktowane pozycje listy, this A List Apart article ma dobre referencje wyjściową.

Answer 2

normalnie ukryć list-style-type i użyć obrazu tła, który jest ruchomy

li 
{ 
    background: url(/Images/arrow_icon.gif) no-repeat 7px 7px transparent; 
    list-style-type: none; 
    margin: 0; 
    padding: 0px 0px 1px 24px; 
    vertical-align: middle; 
} 

"7px 7px" to wyrównanie obrazu tła wewnątrz elementu i jest również w stosunku do dopełnienia.

Answer 3

myślę, co naprawdę chcesz zrobić, to dodać padding (aktualnie dodając do <li>) do <ul> tagu, a następnie wypunktowania ruszy z tekstem <li>.

Istnieje również pozycja w stylu listy, którą można obejrzeć. Wpływa na to, jak linie owijają się wokół obrazów pocisków.

Answer 4

jak "Darren" odpowiedzi, ale drobnych modyfikacji

li 
{ 
background: url("images/bullet.gif") left center no-repeat; 
padding-left: 14px; 
margin-left: 24px; 
} 

działa krzyżowego przeglądarkę, wystarczy dostosować padding i margines

Edycja dla zagnieżdżonych: dodać ten styl, aby dodać margin-left do pod-zagnieżdżonej listy

ul ul {margin-left: 15px; }

Answer 5

Oto co zrobiłem, aby uzyskać małe szare bloki, aby znajdować się po lewej stronie, a w środku tekstu ze zwiększonym lineheight:

line-height:200%; 
padding-left:13px; 
background-image:url('images/greyblock.gif'); 
background-repeat:no-repeat; 
background-position:left center; 

nadzieję, że to pomoże ktoś: D

Answer 6

Miałem ten sam problem, ale nie mogłem użyć opcji tła (i nie chciałem użyć wielu tła), więc pomyślałem o innym rozwiązaniu

to jest przykład dla menu z kwadratowym wskaźnikiem dla a ctive poz/menu prądu (styl domyślny lista jest ustawiona na none w innej reguły)

nav ul li.active>a:before{ 
    content: "■"; 
    position: absolute; 
    top: -22px; 
    left: 55px; 
    font-size: 33px; 

} 

tworzy kwadrat za pomocą kwadratowy znak z „before” pseudo klasy i jest dowolnie pozycjonowany za pomocą pozycjonowanie absolutne.

Answer 7

Inną opcją, którą można zrobić, jest następujący:

li:before{ 
    content:''; 
    padding: 0 0 0 25px; 
    background:url(../includes/images/layouts/featured-list-arrow.png) no-repeat 0 3px; 
} 

Zastosowanie (0 3px) do pozycji na liście obrazów.

Działa w IE8 +, Chrome, Firefox i Opera.

Używam tej opcji, ponieważ możesz łatwo zamieniać styl listy i masz dużą szansę, że nie będziesz musiał użyć żadnego obrazu. (Skrzypce poniżej)

http://jsfiddle.net/flashminddesign/cYAzV/1/

UPDATE:

ten będzie stanowił tekst/treść wchodząc w drugiej linii:

ul{ 
    list-style-type:none; 
} 

li{ 
    position:relative; 
} 

ul li:before{ 
    content:'>'; 
    padding:0 10px 0 0; 
    position:absolute; 
    top:0; left:-10px; 
} 

Dodaj padding-left: do li if potrzebujesz więcej miejsca między pociskiem a treścią.

http://jsfiddle.net/McLeodWebDev/wfzwm0zy/

Answer 8

Rozwiązanie I rozliczane w koniec było zmodyfikować sam obraz, aby dodać trochę odstępu.

Używanie obrazu tła na li, jak niektórzy sugerują, działa w wielu przypadkach, ale kończy się niepowodzeniem, gdy lista jest używana wraz z pływającym obrazem (na przykład, aby uzyskać tekst zawijający się wokół obrazu).

Mam nadzieję, że to pomoże.

Answer 9

Możliwym rozwiązaniem tej kwestii, która nie została jeszcze wspomnieć o następujących:

li { 
     position: relative; 
     list-style-type: none; 
    } 

    li:before { 
     content: ""; 
     position: absolute; 
     top: 8px; 
     left: -16px; 
     width: 8px; 
     height: 8px; 
     background-image: url('your-bullet.png'); 
    } 

Możesz teraz użyć góra/lewo Li: przed, aby umieścić nową kulę. Zauważ, że szerokość i wysokość li: wcześniej muszą być takie same jak wymiary wybranego tła. Działa to w przeglądarce Internet Explorer 8 i nowszych wersjach.

Answer 10

Uważam, że zaakceptowana odpowiedź jest trochę krówka, zdecydowanie musi przepychać się dodatkowymi dopełnieniami i poleceniami css.

Nigdy nie dodawam dopełnienia do osobnych elementów listy, zwykle kontrolując wysokość linii i okazjonalny margines jest wystarczający.

Gdy mam problem z wyrównaniem z niestandardowymi stylami w stylu list, dodaję tylko piksel lub dwa dodatkowe spacje wokół dowolnej strony, aby dostosować jej pozycję względem każdej linii listy.

Answer 11

Albo można użyć

list-style-position: inside; 

Answer 12

rozwiązanie z fontawesome

#polyNedir ul li { position:relative;padding-left:20px } 
#polyNedir ul li:after{font-family:fontawesome;content:'\f111';position:absolute;left:0px;top:3px;color:#fff;font-size:10px;}