Stil mit {stil}

Mar 2009

CSS list-style-position • Position des Listensymbols in Aufzählungen

list-style-position bestimmt die Position des Aufzählungssymbols oder des Index in geordneten Aufzählungen (ol) oder ungeordneten Listen (ul). Das Listensymbol oder der Index können außerhalb der Liste stehen oder einen Block zusammen mit dem Text bilden.

ul.eingezogen { list-style-position: inside }
ul.ausgezogen { list-style-position: outside }

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam ipsum.
• Integer non lacus et urna sagittis commodo. Proin non est ut quam tincidunt hendrerit.
• Donec vulputate ligula. Ut sagittis nibh gravida diam. Vestibulum placerat elit sed nisl rhoncus lobortis.

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam ipsum.
• Integer non lacus et urna sagittis commodo. Proin non est ut quam tincidunt hendrerit.
• Donec vulputate ligula. Ut sagittis nibh gravida diam. Vestibulum placerat elit sed nisl rhoncus lobortis.

list-style-position

alle modernen Browser CSS1 Erblich: Ja

list-style-position

legt fest, ob die Listenabsätze eingezogen werden oder nicht.

Werte

inside | outside | inherit

Wenn sich der Listeneintrag über mehrere Zeilen erstreckt, setzt inside das Listensymbol in den Absatz.

Wenn sich der Listeneintrag über mehrere Zeilen erstreckt, setzt outside das Listensymbol links vor den Absatz (Voreinstellung).

Listen linksbündig setzen

list-style-position regelt aber nicht die Position des Listensymbols oder des Index innerhalb des umfassenden Blocks. Alle Browser ziehen Listen generell um einige Pixel ein, so dass der linke Rand der Liste nicht bündig mit dem Text der umfassenden Box abschließt.

Dieser Abstand entsteht durch die vorgegebenen CSS-Eigenschaften margin und padding beim ul- bzw. ol-Tag. Erst mit einer Stylesheet-Regel

ul { padding-left: 0.6em; margin-left: 0.6em; }

sitzt die Liste linksbündig innerhalb des Textblocks. Als Maßeinheit für margin-left und padding-left sollte »em« benutzt werden, damit die Liste auch dann noch linksbündig mit dem Text abschließt, wenn der Benutzer die Schrift im Browserfenster vergrößert oder verkleinert.

ul- und ol-Elemente werden in Internet Explorer mit einem Abstand nach links gegen die umfassende Box dargestellt. In Mozilla werden ul- und ol-Elemente durch padding-left eingerückt.

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam ipsum.
• Integer non lacus et urna sagittis commodo.
• Donec vulputate ligula. Ut sagittis nibh gravida diam.

zurück zum Seitenanfang