<li>
Pojedyncza pozycja listy `<ul>`, `<ol>` lub `<menu>`.
- Wyświetlanie
- list-item
- Znacznik zamykający
- Wymagany
- Dozwolona zawartość
- Treść przepływu (flow content)
Przykład
#<ol>
<li>Moduł 1: struktura dokumentu</li>
<li>
Moduł 2: tekst i linki
<ul>
<li>akapity i nagłówki</li>
<li>odnośniki</li>
</ul>
</li>
<li>Moduł 3: obrazy</li>
</ol>Definicja i zastosowanie
#Element <li> (od list item) oznacza jedną pozycję listy. Musi znajdować się bezpośrednio w <ul>, <ol> albo <menu>. To, czy przed treścią pojawi się kropka, czy numer, zależy od rodzica, a nie od samego <li>.
W środku może znaleźć się dowolna treść przepływu: tekst, link, obraz, kilka akapitów, a nawet kolejna lista. Tak buduje się listy zagnieżdżone, na przykład menu z podmenu albo plan kursu podzielony na moduły i lekcje.
Domyślnie element ma display: list-item, dlatego generuje znacznik (kropkę lub numer). Znacznik ostylujesz pseudoelementem ::marker, a ukryjesz go, ustawiając na liście list-style: none.
Składnia
#<li>treść pozycji</li>Atrybuty
#liczba całkowita
Ustawia numer tej pozycji w liście<ol>. Kolejne pozycje liczą dalej od podanej wartości. W listach<ul>i<menu>atrybut nie ma zastosowania.
Element obsługuje też wszystkie atrybuty globalne, takie jak class, id, style czy hidden.
Atrybuty w praktyce
#value
liczba całkowitaUstawia numer tej pozycji w liście <ol>. Kolejne pozycje liczą dalej od podanej wartości. W listach <ul> i <menu> atrybut nie ma zastosowania.
<h4>Ranking tygodnia</h4>
<ol>
<li>Ola, 980 pkt</li>
<li>Kuba, 870 pkt</li>
<li value="2">Maja, 870 pkt</li>
<li>Tomek, 750 pkt</li>
</ol>Domyślny CSS
#Większość przeglądarek wyświetla ten element z takimi stylami domyślnymi:
li {
display: list-item;
}Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Podlistę umieszczaj wewnątrz
<li>, a nie obok niego.<ul>wstawione bezpośrednio w inną listę to błąd składni. - Kolor i rozmiar punktora zmienisz bez dodatkowych elementów:
li::marker { color: orange; }. - Jeśli cała pozycja ma być klikalna, umieść w niej link
<a>i powiększ go w CSS. Nie podpinaj obsługi kliknięcia pod sam<li>.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.