Dostosować pozycję obrazu w stylu listy?

Zwykle ukrywam list-style-type i używam obrazka 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, które nie zostało jeszcze wspomniane, 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 pocisk. Zauważ, ż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 background (i nie chciałem używać wielu tła), więc pomyślałem o innym rozwiązaniu

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

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

}

Tworzy kwadrat używając znaku kwadratu z pseudo klasą": before" i można go dowolnie pozycjonować za pomocą pozycjonowania absolutnego.

Oto co zrobiłem, aby małe szare klocki były po lewej stronie i w środku tekstu o zwiększonej liniowości:

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

Rozwiązaniem, na które zdecydowałem się w końcu, było zmodyfikowanie samego obrazu, aby dodać trochę odstępów.

Używanie obrazka tła na li, jak niektórzy sugerują, działa w wielu przypadkach, ale nie działa, gdy lista jest używana obok pływającego obrazu (na przykład, aby tekst zawijał się wokół obrazu).

Mam nadzieję, że to pomoże.

Lub możesz użyć

list-style-position: inside;

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 wymienić styl listy i jest duża szansa, że w ogóle nie będziesz musiał używać obrazu.

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

UPDATE:

Spowoduje to, że tekst / treść trafią 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 padding-left: do li, jeśli chcesz mieć więcej przestrzeni między bulletem a treścią.

Http://jsfiddle.net/McLeodWebDev/wfzwm0zy/

Myślę, że to, co naprawdę chcesz zrobić, to dodać wypełnienie (które obecnie dodajesz do

Jak "odpowiedź Darrena", ale drobna modyfikacja

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

Działa między przeglądarkami, po prostu dostosuj padding i margines

Edycja dla zagnieżdżenia: dodaj ten styl, aby dodać margin-left do podrzędnie zagnieżdżonej listy

Ul ul{ margin-left: 15px;}

Uznaję akceptowaną odpowiedź za trochę krówkę, zdecydowanie też musi się przepychać dodatkowymi paddingami i poleceniami css.

Ja osobiście nigdy nie dodaję paddingu do elementów listy, Zwykle kontrolując ich wysokość linii i sporadyczny margines wystarczy.

Gdy mam problem z wyrównaniem z niestandardowymi obrazami w stylu listy, po prostu dodaję Piksel lub dwa dodatkowe miejsca wokół dowolnej strony, która jest wymagana, aby dostosować jej pozycję 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;}