Značka HTML <li>


Příklad

Jeden uspořádaný (<ol>) a jeden neuspořádaný (<ul>) seznam HTML:

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Další příklady „Vyzkoušejte si to sami“ níže.


Definice a použití

Značka <li>definuje položku seznamu.

Značka <li>se používá uvnitř uspořádaných seznamů ( <ol> ), neuspořádaných seznamů ( <ul> ) a v seznamech nabídek ( <menu> ).

V <ul> a <menu> budou položky seznamu obvykle zobrazeny s odrážkami.

V <ol> budou položky seznamu obvykle zobrazeny s čísly nebo písmeny.

Tip: Ke stylování seznamů použijte CSS .


Podpora prohlížeče

Element
<li> Yes Yes Yes Yes Yes

Atributy

Attribute Value Description
value number Only for <ol> lists. Specifies the start value of a list item. The following list items will increment from that number

Globální atributy

Značka <li>také podporuje globální atributy v HTML .


Atributy události

Značka <li>také podporuje atributy událostí v HTML .



Další příklady

Příklad

Použití atributu value v seřazeném seznamu:

<ol>
  <li value="100">Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
  <li>Water</li>
  <li>Juice</li>
  <li>Beer</li>
</ol>

Příklad

Nastavte různé typy stylů seznamu (pomocí CSS):

<ol>
  <li>Coffee</li>
  <li style="list-style-type:lower-alpha">Tea</li>
  <li>Milk</li>
</ol>

<ul>
  <li>Coffee</li>
  <li style="list-style-type:square">Tea</li>
  <li>Milk</li>
</ul>

Příklad

Vytvořte seznam uvnitř seznamu (vnořený seznam):

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

Příklad

Vytvořte složitější vnořený seznam:

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea
        <ul>
          <li>China</li>
          <li>Africa</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

Související stránky

HTML výukový program: HTML seznamy

HTML DOM reference: Li Object

Kurz CSS: Seznamy stylů


Výchozí nastavení CSS

Většina prohlížečů zobrazí <li>prvek s následujícími výchozími hodnotami:

li {
  display: list-item;
}