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>

Spróbuj sam

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>

Spróbuj sam

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>

Spróbuj sam

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>

Spróbuj sam

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>

Spróbuj sam

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