CSS-Eigenschaft list-style-position

.probe {
  list-style-position: inside;
}

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

Wechselwirkungen

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

Wo die Marke steht und was der Text tut

Der Unterschied zwischen den beiden Werten zeigt sich erst bei mehrzeiligen Einträgen. Bei outside steht die Marke neben dem Textblock, und alle Zeilen des Eintrags beginnen an derselben Kante; die Marke steht allein in der Höhe der ersten Zeile. Bei inside ist die Marke der erste Inhalt der ersten Zeile, und die folgenden Zeilen laufen unter sie.

Für laufenden Text ist die erste Form die lesbarere, weil die Textkante durchgehend bleibt und das Auge beim Zeilenwechsel eine feste Marke hat. Die zweite Form ist dort richtig, wo der Eintrag zusammen mit seiner Marke einen Block bilden soll, etwa in einem Kasten mit engem Rand, aus dem eine außen stehende Marke herausragen würde.

Wo genau die Marke bei outside steht, legt die Spezifikation nicht fest. Der Abstand zum Text ist damit vom Anwenderprogramm abhängig, und ein Entwurf, der auf einen bestimmten Abstand angewiesen ist, sollte sich nicht darauf verlassen.

Ränder, Innenabstände und abgeschnittene Marken

Eine außen stehende Marke braucht Platz außerhalb des Textblocks, und diesen Platz nimmt sie sich in der Regel aus dem Innenabstand der Liste. Deshalb bringen Browser für Listen einen linken Innenabstand mit, und deshalb verschwinden die Marken, sobald dieser Innenabstand auf null gesetzt wird: sie stehen dann außerhalb des sichtbaren Bereichs.

Dieselbe Ursache hat ein zweiter Fall. Steht die Liste in einem Element, das seinen Überlauf abschneidet, wird eine außen stehende Marke mit abgeschnitten. Und grenzt links ein umflossenes Element an, kann die Marke darunter geraten.

In allen drei Fällen hilft dasselbe: entweder genug Innenabstand an der Liste lassen oder auf inside wechseln, womit die Marke innerhalb des Textblocks liegt und keinen Platz außerhalb mehr braucht.

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.

Ausgangswert

outside

Berechneter Wert

Spezifizierter Wert

Vererbung

Ja

Anwendbarkeit

Auf Elemente, die als Punkt einer Liste dargestellt werden.

%-Bezugswert

Nicht zutreffend

Mediengruppe(n)

Visual