CSS 2.1: `list-style-position`

Erläuterungen

Die Eigenschaft list-style-position ist ein Teil der Kurzschrift- Eigenschaft list-style. Sie bestimmt, ob die Listenmarkierungen ein Teil des Textes sind oder der Text eingerückt ist, so dass die Markierungen neben dem Textblock stehen.

Die CSS-Spezifikation sagt nichts über die Größe der Markierungen aus.

Tipp:

Es ist vorteilhaft, anstelle der einzelnen Eigenschaften wann immer möglich die entsprechenden Kurzschrift- Eigenschaften zu verwenden. Dadurch werden die notierten Regeln übersichtlicher und kompakter. Man sollte dabei aber im Hinterkopf behalten, dass alle nicht deklarierten einzelnen Eigenschaften auf ihre Ausgangswerte zurückgesetzt werden.

Erlaubte Werte

Auszug aus der Spezifikation (die verwendete Syntax wird im Artikel CSS-Wertesyntax genauer erläutert):

'list-style-position' inside | outside | inherit

Die folgenden Beschreibungen der Werte gelten für die Schreibrichtung von links nach rechts. Bei umgekehrter Schreibrichtung stehen die Marker auf der rechten Seite des Textes und die Block- Box wird rechts eingerückt.

outside (Ausgangswert): Der linke Rand der Block- Box wird ein Stück weit eingerückt, so dass links der Box Platz für die Markierungen entsteht. CSS 2.1 macht keine Angaben über die genaue Lage der Markierungen oder darüber, wie weit die Box eingerückt wird.
inside: Die Markierungen werden nach rechts in die Block- Box eingezogen und dadurch praktisch Teil des Textes. Genau ausgedrückt: Die Zähler werden zur ersten Inline- Box der durch die Elemente LI definierten Block- Boxes. Der linke Rand des Blocks darf sich dabei nicht verändern. Auch hier macht CSS 2.1 keine Angaben über die genaue Lage der Markierungen.
inherit: Bestimmt explizit, dass diese Eigenschaft denselben berechneten Wert wie im Elternelement annimmt.

Code-Beispiel:

P.liste { display: list-item; list-style-type: disc; list-style-position: inside; }

Browserunterstützung

: Die Eigenschaft list-style-position wird von allen modernen Browsern unterstützt.

Eric Meyer's CSS2 Test Suite zeigt am praktischen Beispiel, wie die Browser mit dieser Eigenschaft umgehen.

Keine Eigenschaft und kein Selektor stehen in einem Stylesheet für sich allein. In der Praxis kann das Zusammenspiel zwischen verschiedenen Elementen und Selektoren einen nicht zu unterschätzenden Einfluss auf die Fähigkeiten der Browser haben. Bugs treten oft erst durch das Zusammenwirken mehrerer Eigenschaften an unterschiedlichen Elementen auf.

Wechselwirkungen:

list-style, list-style-type, list-style-image

Besonderheiten im Medientyp `handheld`:

Diese Eigenschaft ist Teil des Standards CSS Mobile Profile 1.0 und unterliegt damit auch in Mobilgeräten allen relevanten Regeln aus CSS 2.1. Bei Verwendung von list-style-position sollte man damit rechnen, dass die Stellung der Listenmarker auf einen möglichst platzsparenden Abstand zurechtgerückt wird.

Weitere Charakteristika:

Die Stylesheet-Schnellreferenz mit einer Zusammenfassung aller visuellen Eigenschaften kann auch als PDF-Datei herunter geladen werden.

Ausgangs- wert:	Berechneter Wert:	Vererbung:	Anwendbar- keit:	%-Bezugs- wert:	Medien- gruppe(n):
`outside`	Spezifizierter Wert	Ja	Auf Elemente, die als Punkt einer Liste dargestellt werden.	Nicht zutreffend	Visual

Verwendete Standards

Dieser CSS-Referenz liegen folgende Spezifikationen zugrunde: CSS 1, CSS 2.1 CR und CSS Mobile.

TOP

Notizen: