CSS list-style-type • Listensymbole

Automatische Listensymbole

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.

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" " "; }