Jak vytvořit víceúrovňový seznam v HTML

Vytváření víceúrovňového seznamu v HTML je těžší než vytváření víceúrovňového seznamu v textovém procesoru, ale lze jej stále dosáhnout pomocí HTML a CSS. Níže jsou uvedeny kroky k vytvoření víceúrovňového seznamu v HTML pomocí CSS.

Než se pokusíte provést následující kroky, uvědomte si, že k vytvoření víceúrovňového seznamu v HTML musíte vnořit seznam do jiné položky seznamu. Také proto, že HTML má pouze seznam odrážek nebo seznam čísel, pokud chcete změnit typ seznamu, musíte použít CSS k vytvoření nového typu stylu.

Příklad HTML

Níže je uveden příklad, jak lze provést víceúrovňový seznam v HTML pomocí HTML a CSS stylu definovaného v HTML tagech. V tomto příkladu máme dvě položky seznamu a ve druhé položce seznamu jiný seznam s typem seznamu alfa, který je ve stylu alfa, který vytvoří seznam stylů a, b atd.

  1. První
  2. Druhý 
    1. Sub of Second
    2. Další Sub
  3. Třetí
  4. Čtvrtý

Poznámka: Ve výše uvedeném příkladu používáme další doplňkové výplně a styly okrajů, které pomáhají přizpůsobit se našim globálním hodnotám CSS a ukázat příklad, jak můžete přidat nebo zmenšit prostor a odsazení.

Příklad výstupu

  1. První
  2. Druhý
    1. Sub of Second
    2. Další Sub
  3. Třetí
  4. Čtvrtý

Příklad CSS a HTML

Toto řešení funguje skvěle, pokud potřebujete několikrát vytvořit víceúrovňový seznam. Pokud však chcete mít na svém webu několik víceúrovňových seznamů, je vhodnější zahrnout do souboru CSS kód CSS podobný příkladu uvedenému níže. V našem příkladu jsme vytvořili dvě třídy nazvané "roman" a "square" a nazýváme je v HTML kódu.

Kód CSS 

 .roman {list-style-type: lower-roman;}. square {list-style-type: square; okraj vlevo: -2em;}

HTML kód 

  • První
  • Druhý 
    • Sub of Second
    • Další Sub
  • Třetí
  • Čtvrtý

Příklad výstupu

  • První
  • Druhý
    • Sub of Second
    • Další Sub
  • Třetí
  • Čtvrtý

Dostupné hodnoty typu CSS seznamu

Níže je uveden seznam dalších hodnot CSS seznamu stylů, které lze použít namísto příkladů, které jsme ukázali dříve. Také jsme uvedli stručný popis každé hodnoty.

Poznámka: Ne všechny tyto hodnoty fungují nebo se zobrazují ve všech prohlížečích.

disk - Malý pevný kruh (viz výše).

kruh - Malý prázdný kruh (viz výše).

náměstí - Pevné náměstí.

desetinné - desetinné číslo začínající na "1." (viz výše).

decimal-lead-zero - Desetinné číslo začínající 0 (např. 01, 02, 03 atd.).

lower-roman - Malá římská číslice začínající písmenem „i.“.

upper-roman - Velká římská číslice začínající písmenem "I.".

lower-greek - malá řečtina.

nižší latina - malá latinka

horní latina - velká latinka

arménské - tradiční arménské číslování

gruzínština - tradiční gruzínské číslování

nižší-alfa - malá písmena abecedy začínající písmenem „a“. (viz výše).

upper-alpha - Velká písmena abecedy začínající písmenem „A.“.

žádný - Nic neuvádět.