CSS list-style-type • Listensymbole

List style type: Zeichen und Listensymbole für Aufzählungen: Kugel, Quadrat, gefüllter Kreis oder römische Ziffern, lateinische Zahlen

CSS list-style-type bestimmt das Aufzählungssymbol in ungeordneten Listen (ul) und die Art des Index in geordneten Aufzählungen (ol). Für ungeordnete Listen gibt es Punkte, Kreise und Vierecke, für geordnete Aufzählungen stehen alphanumerische Zeichen und Glyphen zur Verfügung.

Natürlich kann man Listen mit einem führenden Punkt, Spiegelstrich oder Zahl in Handarbeit setzen – dafür ist allerdings mehr HTML-Markup und CSS nötig, das am Ende nur schwer zu überschauen ist. Bei Änderungen geht der Aufbau verloren, die Nummerierung der Aufzählung muss erneut in Angriff genommen werden.

Dafür hat HTML die Elemente ul für ungeordnete Listen und ol für geordnete Listen sowie das li-Tag für die einzelnen Punkte der Liste. CSS bestimmt dann die Feinheiten.

Wie die Browser ul und ol formatieren

Die Browser ziehen die Einträge automatisch um 40 Pixel von links ein.

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

Setzt man padding-left auf 0, sitzt der Inhalt der li-Elemente zwar exakt auf dem linken Rand des umfassenden Blocks, aber Listensymbole und der Index von nummerierten Listen liegt dann außerhalb und vor dem linken Rand.

Erst padding-left: 1em richtet Symbole und Index am linken Rand aus (bei alten Versionen von IE war es noch margin-left: 1em).

  • Leonard Cohen
    First we take Manhattan
  • Kamasi Washington
    How to tame lions
  • Woodkit
    Que Te Mate el Desierto

list-style-type

Die CSS-Eigenschaft list-style-type wirkt nur bei Elementen, die Listenelemente darstellen können – das sind ul- und ol-Elemente.

Erblich: Ja

list-style-type
bestimmt das Aufzählungssymbol in einer Liste: gefüllte oder ungefüllte Kreise in ungeordneten Listen, alphabetische und numerische Werte in geordneten Aufzählungen. Sowohl in geordneten als auch in ungeordneten Listen kann das Listensymbol durch die Angabe von none unterdrückt werden.
Werte
disc (• • •) | circle (○ ○ ○) | square (▪ ▪ ▪)| decimal (1 2 3)
decimal-leading-zero (01, 02, 03) | lower-roman (i ii iii) | upper-roman (I II III) | lower-greek (α β γ) | lower-latin / lower-alpha (a b c) | upper-latin / upper-alpha (A B C) | armenian (Ա Բ Գ) | georgian (ა ბ გ) | none

disc, circle, square, decimal sowie lateinische und romanische Symbole stellen alle Browser seit ewig und drei Jahren korrekt dar. decimal-leading-zero, die Darstellung mit führenden Nullen, wird von Internet Explorer ab Version 8 unterstützt.

list-style-type: circle ungefüllte Kreise

  • Leonard Cohen
    First we take Manhattan
  • Kamasi Washington
    How to tame lions
  • Woodkit
    Que Te Mate el Desierto

list-style-type: decimal 1, 2, 3 etc.

  1. Lelshly Arms
    Legendary
  2. Chicago
    You're the Inspiration
  3. Chicago
    25 or 6 to 4

list-style-type: disc Standardsymbol (bullets)

  • 3 Doors Down
    Here without you
  • The Doors
    Riders On the Storm
  • Kate Bush
    Running up that Hill (A Deal With God)

list-style-type: none
Kein Listensmbol

  • Montag
  • Dienstag
  • Mittwoch

list-style-type: lower-roman
Lateinische Kleinbuchstaben

  1. Montag
  2. Dienstag
  3. Mittwoch

list-style-type: upper-roman
Lateinische Großbuchstaben

  1. Montag
  2. Dienstag
  3. Mittwoch

list-style-type: square
Vierecke

  • Montag
  • Dienstag
  • Mittwoch

list-style-type: lower-latin
lateinische Kleinbuchstaben

  1. Montag
  2. Dienstag
  3. Mittwoch

list-style-type: decimal-leading-zero
Dezimal mit führenden Nullen

  1. Montag
  2. Dienstag
  3. Mittwoch

CSS-Listen mit Sonderzeichen

CSS content:before kann die Listenzeichen um Sonderzeichen ergänzen und erspart die kleinen Bilder, die mit list-style-image vor Listeneinträge gesetzt werden. Das normale Listensymbol wird mit list-style-type:none entfernt und anstelle dessen mit content:before ein Sonderzeichen wie ein Dreieck vor die Liste gesetzt.

  • Montag
  • Dienstag
  • Mittwoch
ul.char { list-style-type:none;}
ul.char li:before { content: "\25BA" " "; }
list-style-type