Tag HTML <li>
Definicja i użycie
<li>
etykieta definiuje pozycje listy.
<li>
etykieta używana do list uporządkowanych (<ol>) oraz listami niesporządkowanymi (<ul>) i listy menu (<menu>)
W <ul> i <menu>, pozycje listy są zazwyczaj wyświetlane jako kropki.
W <ol>, pozycje listy są zazwyczaj wyświetlane jako liczby lub litery.
Wskazówka:Użyj CSS doUstaw styl listy.
Zobacz również:
Kurs HTML:Lista HTML
Podręcznik referencyjny HTML DOM:Obiekt Li
Kurs CSS:Ustaw styl listy
Przykład
Przykład 1
uporządkowane (<ol>
) i niesporządkowane (<ul>
) listy HTML:
<ol> <li>Kawa</li> <li> herbata </li> <li>mleko</li> </ol> <ul> <li>Kawa</li> <li> herbata </li> <li>mleko</li> </ul>
Przykład 2
Użyj atrybutu value w liście uporządkowanej:
<ol> <li value="100"> kawa </li> <li> herbata </li> <li>mleko</li> <li> czysta woda </li> <li> sok </li> <li> piwo </li> </ol>
Przykład 3
Ustaw różne typy stylów listy (używając CSS):
<ol> <li>Kawa</li> <li style="list-style-type:lower-alpha"> herbata </li> <li>mleko</li> </ol> <ul> <li>Kawa</li> <li style="list-style-type:square"> herbata </li> <li>mleko</li> </ul>
Przykład 4
Utwórz listę w liście (wewnętrzna lista):
<ul> <li>Kawa</li> <li>Tee</li> <ul> <li>Pu'er</li> <li> zielona herbata </li> </ul> </li> <li>mleko</li> </ul>
Przykład 5
Utwórz bardziej złożoną wcięcia listy:
<ul> <li>Kawa</li> <li>Tee</li> <ul> <li>Pu'er</li> <li>Herbata zielona</li> <ul> <li>Biluochun</li> <li>Longjing</li> </ul> </li> </ul> </li> <li>mleko</li> </ul>
Atrybut
Atrybut | Wartość | Opis |
---|---|---|
value | Numer | Dla list <ol>. Określa wartość początkową elementu listy. Następne elementy listy będą zwiększane o tę wartość. |
Globalne atrybuty
<li>
Tagi te obsługują również Globalne atrybuty HTML.
Atrybuty zdarzeń
<li>
Tagi te obsługują również Atrybuty zdarzeń w HTML.
Domyślne ustawienia CSS
Większość przeglądarek użyje następujących wartości domyślnych do wyświetlania <li>
Element:
li { display: list-item; }
Obsługa przeglądarek
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
Chrome | Edge | Firefox | Safari | Opera |
Wsparcie | Wsparcie | Wsparcie | Wsparcie | Wsparcie |