In dem Beitrag Listen mit HTML und CSS wurde beschrieben, wie Listen aufgebaut und grundlegende Einstellungen vorgenommen werden. Ergänzend zu diesem Beitrag folgen nun die verschiedenen Style und Positionseigenschaften von Listen und ihren Elementen.
1. Eigenschaften von Listen (“list-style-type”)
Standard:
ul { list-style-type:Eigenschaftswert; }
Wert: | Beispiel: | Beschreibung: |
---|---|---|
armenian |
|
Armenische Aufzählung (ordered list) |
circle |
|
Kreis (unordered list) |
cjk-ideographic |
|
Ideographische Nummerierung (ordered list) |
decimal |
|
Dezimal Zahlen (ordered list) |
decimal-leading-zero |
|
Dezimal Zahlen mit führender Null (ordered list) |
disc |
|
gefüllter Kreis (unordered list) |
georgian |
|
Georgische Zahlen (ordered list) |
hebrew |
|
Hebräische Zahlen (ordered list) |
hiragana |
|
Nummerierung Japanisch (ordered list) (a, i, u, e, o, ka, ki, … ) |
hiragana-iroha |
|
Nummerierung Japanisch (ordered list) (i, ro, ha, ni, ho, he, to, … ) |
katakana |
|
Nummerierung Japanisch “Großbuchstaben” (ordered list) (A, I, U, E, O, KA, KI, … ) |
katakana-iroha |
|
Nummerierung Japanisch “Großbuchstaben” (ordered list) (I, RO, HA, NI, HO, HE, TO, … ) |
lower-alpha |
|
Kleinbuchstaben (ordered list) |
upper-alpha |
|
Großbuchstaben (ordered list) |
lower-greek |
|
Griechische Kleinbuchstaben (ordered list) |
lower-latin |
|
Römische Kleinbuchstaben (ordered list) |
upper-roman |
|
Römische Großbuchstaben (ordered list) |
lower-latin |
|
lateinische Kleinbuchstaben (ordered list) |
upper-latin |
|
Lateinische Großbuchstaben (ordered list) |
square |
|
Rechteck (unordered list) |
none |
|
Kein Aufzählungszeichen |
2. Positionierung (“list-style-position”)
Durch diese Eigenschaft kann man bestimmen, ob sich die Aufzählungszeichen innerhalb oder ausserhalb des Textflusses befinden.
ul { list-style-position:Eigenschaftswert; }
Wert: | Beispiel: | Beschreibung: |
---|---|---|
inside |
|
Innerhalb des Textflusses |
outside |
|
Ausserhalb des Textflusses |