Značka HTML <ul>


Příklad

Neuspořádaný seznam HTML:

<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 <ul>definuje neuspořádaný (odrážkový) seznam.

Použijte <ul>značku společně s tagem <li> k vytvoření neuspořádaných seznamů.

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

Tip: Pro uspořádané seznamy použijte značku <ol>


Podpora prohlížeče

Element
<ul> Yes Yes Yes Yes Yes

Globální atributy

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


Atributy události

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



Další příklady

Příklad

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

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

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

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

Příklad

Rozšiřte a zmenšete výšku řádku v seznamech (pomocí CSS):

<ul style="line-height:180%">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<ul style="line-height:80%">
  <li>Coffee</li>
  <li>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: Ul Object

Kurz CSS: Seznamy stylů


Výchozí nastavení CSS

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

Příklad

ul {
  display: block;
  list-style-type: disc;
  margin-top: 1em;
  margin-bottom: 1 em;
  margin-left: 0;
  margin-right: 0;
  padding-left: 40px;
}