Dostosować pozycję obrazu w stylu listy?

Czy istnieje sposób na dostosowanie pozycji obrazu w stylu listy?

Kiedy używam wypełnienia dla elementów listy, obraz pozostanie na swoim miejscu i nie będzie się przesuwał z wypełnieniem ...

Nie całkiem. Twoje wypełnienie (prawdopodobnie) jest stosowane do elementu listy, więc wpłynie tylko na rzeczywistą zawartość elementu listy.

Połączenie stylów tła i dopełnienia może stworzyć coś, co wygląda podobnie, np

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

Być może chcesz dodać styl do kontenera listy nadrzędnej (ul), aby ustawić pozycje listy wypunktowanej, ten artykuł A List Apart ma dobre odniesienie początkowe.

Zwykle ukrywam typ listy i używam 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” jest tym, co wyrównuje obraz tła wewnątrz elementu i jest również względem wypełnienia.

Możliwe rozwiązanie tego pytania, o którym jeszcze nie wspomniano, jest następujące:

    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órnej / lewej części li: before, aby ustawić nowy punktor. Zwróć uwagę, że szerokość i wysokość li: before muszą mieć takie same wymiary, jak wybrany obraz tła. Działa to w przeglądarce Internet Explorer 8 i nowszych.

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

to jest przykład menu, które ma kwadratowy wskaźnik dla aktywnej / bieżącej pozycji menu (domyślny styl listy jest ustawiony na Brak w innej regule)

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

}

tworzy kwadrat za pomocą znaku kwadratu z pseudoklasą „: before” i można go dowolnie pozycjonować za pomocą pozycjonowania bezwzględnego.

Oto, co zrobiłem, aby małe szare bloki były po lewej stronie i pośrodku tekstu ze zwiększoną wysokością linii:

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

Mam nadzieję, że to komuś pomoże: D

Ostatecznie zdecydowałem się na zmodyfikowanie samego obrazu, aby dodać trochę odstępów.

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 razem z obrazkiem pływającym (na przykład, aby tekst zawinął się wokół obrazu).

Mam nadzieję że to pomoże.

Inną opcją, którą możesz zrobić, jest:

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

Użyj (0 3px), aby ustawić obraz listy.

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

Używam tej opcji, ponieważ możesz łatwo zamienić styl listy i jest duża szansa, że ​​nawet nie będziesz musiał używać obrazu. (skrzypce poniżej)

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

AKTUALIZACJA:

To uwzględni tekst / treść przechodzącą do 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 dopełnienie po lewej: do li, jeśli chcesz mieć więcej miejsca między punktorem a treścią.

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

Lub możesz użyć

list-style-position: inside;

Myślę, że naprawdę chcesz dodać wypełnienie (obecnie dodajesz do <li>) do tagu <ul>, a następnie punkty będą przesuwać się wraz z tekstem <li>.

Istnieje również pozycja w stylu listy, na którą możesz spojrzeć. Wpływa na sposób zawijania linii wokół obrazów punktorów.

jak odpowiedź „darren”, ale niewielka modyfikacja

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

działa w różnych przeglądarkach, wystarczy dostosować dopełnienie i marginesy

Edytuj zagnieżdżone: dodaj ten styl, aby dodać lewy margines do pod-zagnieżdżonej listy

ul ul {margin-left: 15px; }

Używam czegoś takiego, wydaje mi się całkiem czysty i prosty:

ul { 
     list-style:  none;
     /* remove left padding, it's usually unwanted: */
     padding:  0;
}

li:before {
     content:  url(icon.png);
     display:  inline-block;
     vertical-align:  middle;

     /* If you want some space between icon and text: */
     margin-right:   1em;
}

Powyższy kod działa tak, jak w większości moich przypadków.
W celu dokładnej regulacji możesz zmodyfikować vertical-align, np .:

vertical-align:  top;

/* or */
vertical-align:  -10px;

/* or whatever you need instead of "middle" */

Można ustawić list-style: nonena lizamiast uljeśli wolisz.

Zaakceptowana odpowiedź wydaje mi się trochę dziwna, zdecydowanie też musi przepychać się dodatkowymi komendami dopełnienia i css.

Nigdy nie dodaję dopełnienia do listy elementów osobiście, zwykle kontrolując wysokość wiersza i sporadyczny margines wystarczy.

Kiedy mam problem z wyrównaniem z niestandardowymi obrazami w stylu listy, po prostu dodaję piksel lub dwa dodatkowe miejsce wokół dowolnej strony, która jest wymagana, aby dostosować jej położenie względem każdej linii listy.

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;}

Ukryj domyślny obraz punktora i używaj go, background-imageponieważ masz znacznie większą kontrolę, na przykład:

li {
    background-image: url(https://material.io/tools/icons/static/icons/baseline-add-24px.svg);
    background-repeat: no-repeat;
    background-position: left 50%;
    padding-left: 2em;
}

ul {
    list-style: none;
}

<ul>
<li>foo</li>
<li>bar</li>
</ul>