So erstellen Sie eine mehrstufige Liste in HTML

Das Erstellen einer mehrstufigen Liste in HTML ist schwieriger als das Erstellen einer mehrstufigen Liste in einem Textverarbeitungsprogramm, kann aber dennoch mit HTML und CSS erreicht werden. Im Folgenden finden Sie Schritte zum Erstellen einer mehrstufigen Liste in HTML mit Hilfe von CSS.

Bevor Sie die folgenden Schritte ausführen, machen Sie sich bewusst, dass Sie zum Erstellen einer mehrstufigen Liste in HTML die Liste in einem anderen Listenelement verschachteln müssen. Da HTML nur entweder eine Aufzählungsliste oder eine Zahlenliste hat, müssen Sie CSS verwenden, um einen neuen Stiltyp zu erstellen, wenn Sie den Listentyp ändern möchten.

HTML-Beispiel

Unten ist ein Beispiel dafür, wie eine Liste mit mehreren Ebenen in HTML erstellt werden kann, indem HTML und der in den HTML-Tags definierte CSS-Stil verwendet werden. In diesem Beispiel haben wir zwei Listenelemente und im zweiten Listenelement eine weitere geordnete Liste mit einem niedrigeren Alpha-Listenstiltyp, um einen a, b usw. Listenstil zu erstellen.

<ol>
 <li>First</li>
 <li>Second
 <ol style="list-style-type: lower-alpha; padding-bottom: 0;">
  <li style="margin-left:2em">Sub of Second</li>
  <li style="margin-left:2em; padding-bottom: 0;">Another Sub</li>
 </ol>
 </li>
 <li>Third</li>
 <li>Fourth </li>
</ol>

Beispiel für die Ausgabe

1. Zuerst
2. Sekunde
   1. Sub des Zweiten
   2. Noch ein Sub
3. Dritter
4. Vierte

CSS- und HTML-Beispiel

Die obige Lösung funktioniert hervorragend, wenn Sie nur ein paar Mal eine Liste mit mehreren Ebenen erstellen müssen. Wenn Sie jedoch beabsichtigen, mehrere mehrstufige Listen auf Ihrer Website zu haben, wäre es eine bessere Idee, CSS-Code ähnlich dem unten stehenden Beispiel einzufügen. In unserem Beispiel haben wir zwei Klassen namens „roman“ und „square“ erstellt und im HTML-Code aufgerufen.

CSS-Code

<style type="text/css">
.roman {
 list-style-type: lower-roman;
}
.square {
 list-style-type: square;
 margin-left: -2em;
}
</style>

HTML Quelltext

<ul class="roman">
 <li>First</li>
 <li>Second
 <ul class="square">
  <li>Sub of Second</li>
  <li>Another Sub</li>
 </ul>
 </li>
 <li>Third</li>
 <li>Fourth</li>
</ul>

Beispiel für die Ausgabe

• Zuerst
• Sekunde
  • Sub des Zweiten
  • Noch ein Sub
• Dritter
• Vierte

Verfügbare Werte vom Typ CSS-Listenstil

Nachfolgend finden Sie eine Auflistung anderer CSS-Werte im Listenstil, die anstelle der zuvor gezeigten Beispiele verwendet werden können. Wir haben auch eine kurze Beschreibung jedes Werts beigefügt.

Scheibe – Kleiner ausgefüllter Kreis (siehe oben).
Kreis – Kleiner leerer Kreis (siehe oben).
Quadrat – Festes Quadrat.
dezimal – Dezimalzahl beginnend mit „1“. (oben gezeigt).
decimal-leading-zero – Dezimalzahl, die mit 0 beginnt (z. B. 01, 02, 03 usw.).
Lower-Roman – Römische Zahl in Kleinbuchstaben, die mit “i.” beginnt.
upper-roman – Römische Zahl in Großbuchstaben, die mit “I.” beginnt.
Lower-Greek – Griechisch in Kleinbuchstaben.
Lower Latin – Latein in Kleinbuchstaben
upper-latin – Latein in Großbuchstaben
armenisch – Traditionelle armenische Nummerierung
georgian – Traditionelle georgische Nummerierung
Lower-Alpha – Kleinbuchstaben beginnend mit „a“. (oben gezeigt).
upper-alpha – Alphabetische Großbuchstaben beginnend mit “A.”.
none – Nichts anzeigen.