Dostosować pozycję obrazu w stylu listy?

169

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 ...

datisdesign
źródło
1
Szkoda, że ​​to wciąż nie jest uwzględnione w specyfikacji CSS. Jaki jest punkt, list-style-imagejeśli nie można go ustawić? Wygląda na to, że w rezultacie większość ludzi stosuje obejścia takie jak ::beforei background-imagezamiast tego.
Mentalist

Odpowiedzi:

205

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.

darren
źródło
1
Spowoduje to przesunięcie stylu listy nieco bardziej na prawo niż normalne elementy listy, co jest nieco „wyłączone”, jeśli poniżej znajdują się normalne elementy. Nie znam niezależnego rozwiązania, ale w zależności od szerokości obrazu poprawi to: "margin: 0 0 0 -7px;"
e-motiv
W przypadku górnego pozycjonowania zmiana topwartości zadziałała dla mnie zamiast górnej wyściółki. background: url(images/bullet.gif) no-repeat left 8px;
Sridhar Katakam
Szkoda, że ​​nie możesz bezpośrednio zmienić stylu listy. To sprawia, że ​​ludzie stosują różnego rodzaju obejścia. Naprawdę wolałbym używać stylu listy do czegoś, co jest naprawdę stylem listy, ale nie mogę sprawić, by wyglądało tak, jak chcę.
mcv
75

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.

NickGPS
źródło
21

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.

Ramon de Jesus
źródło
To moim zdaniem najlepsze rozwiązanie. Jeśli wyślesz pseudoelement :: before po lewej stronie, osiągniesz ten sam efekt.
TaylorMac,
12

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.

lad1337
źródło
8

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

kaed
źródło
6

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.

zeds
źródło
6

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/

McLeodWebDev
źródło
1
zaktualizowana wersja zajmie się dodatkową linią JSfiddle
McLeodWebDev
6

Lub możesz użyć

list-style-position: inside;
Mathias Maes
źródło
3

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.


źródło
3

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

khaled_webdev
źródło
3

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.

jj
źródło
0

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.

AdamJones
źródło
Nigdy nie miałeś do czynienia z renderowaniem w różnych przeglądarkach, prawda?
Volker E.
0

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;}
Fatih Topcu
źródło
0

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>

Ronnie Royston
źródło
0

My solution:

ul {
    line-height: 1.3 !important;
    li {
        font-size: x-large;
        position: relative;
        &:before {
            content: '';
            display: block;
            position: absolute;
            top: 5px;
            left: -25px;
            height: 23px;
            width: 23px;
            background-image: url(../img/list-char.png) !important;
            background-size: 23px;
            background-repeat: no-repeat;
        }
    }
}

Bartłomiej Kuźniar
źródło