CSS list-style-position

List Style Position Wo und wie sitzt das Listensymbol (Kugeln, Bullets, Index) in Listen?

CSS list-style-position bestimmt die Position der Index in geordneten Aufzählungen mit HTML ol bzw. das Listensymbol von ungeordneten Listen mit HTML ul.

Listensymbole oder der Index können außerhalb der Liste stehen oder einen Block zusammen mit dem Text bilden.

Auch wenn es sich so anhört: list-style-position regelt nicht die Position des Listensymbols oder des Index innerhalb der ul- oder ol-Box. Listensymbole bzw. Ordnungszahlen von geordneten Listen bilden per Vorgabe eine eigene Box, der Text in den li-Boxen eine weitere Box.

HTML ul / ol Abstand der Marker-Box und Text-Box vom linken Rand ist padding

Alle Browser ziehen das li-Element um ein padding-left von 40px ein, so dass Listen und Aufzählungen nicht linksbündig am Rand des umfassenden Blocks abschließen. Der Abstand des Blocks mit den Listensymbolen bzw. dem Index entsteht ebenfalls durch padding-left. Erst mit

ul { 
   padding-left: 1em;
}

sitzt die Listensymbole linksbündig im umfassenden Block. Die Maßeinheit für padding-left sollte »em« sein, damit die Liste auch dann linksbündig abschließt, wenn der Benutzer die Schrift im Browserfenster vergrößert oder verkleinert.

Für die ganz ganz alten Versionen von IE beruhte der Einzug noch auf margin-left – aber schon IE10 richtet mit padding-left die Liste linksbündig im umfassenden Block aus.

list-style-position : inside hingegen versetzt die Listensymbole bzw. Ordnungszahl (Listmarker) in die Textbox der Liste.

CSS list-style-position

Erblich

ol.in { list-style-position: inside; background: gray; }
ol.out { list-style-position: outside; background: gray; }
inside
  1. vivat nostra civitas maecenatum caritas quae nos hic protegit!
  2. Pereat tristitia pereant osores
  3. pereat diabolus quivis antiburschius atque irrisores
outside
  1. vivat nostra civitas maecenatum caritas quae nos hic protegit!
  2. Pereat tristitia pereant osores
  3. pereat diabolus quivis antiburschius atque irrisores

list-style-position: inside setzt das Listensymbol in die ul- bzw. ol-Box. Die CSS-Spezifikation gibt keinen exakten Abstand des Listensymbols vom Text der Liste vor. inside setzt Ziffern oder Zeichen in geordneten Listen (ol) linksbündig innerhalb der Listenbox.

list-style-position: outside ist der Default. Wenn sich der Listeneintrag über mehrere Zeilen erstreckt, setzt outside das Listensymbol links vor den Absatz.

Die CSS-Spezifikation gibt keine präzise Position vor. list-style-position: outside hebt die Liste vom Text im umfassenden Block ab. Listen mit Ordnungszahlen (ol) richten Ziffern oder Zeichen rechtsbündung am Punkt aus.

Wenn für ul oder ol background-color festgelegt wird, gilt der Hintergrund nur für die Textbox, die Listensymbole bilden eine eigene Box und bleiben außen vor.

Zähler anstelle von Listen

ul und ol sind einfach und intuitiv, aber CSS hat nur begrenzte Mittel für die Formatierung von Listen. Die Alternative zu Aufzählungen ist CSS counter. Counter ist ein Zähler für beliebige Elemente, z.B. für section- oder article-Elemente oder für die Vorkommen von CSS-Klassen innerhalb der Seite. Zusammen mit den CSS Pseudo-Elementen ::before und ::after nummeriert CSS counter ganze Strukturen mit einem großen Spielraum für die Gestaltung mit CSS.

video-mann-unter-feuer
Action und Abenteuer

Mann unter Feuer

Der abgewrackte Navy-Soldat Creasy übernimmt einen Bodyguard-Job in Mexiko.

video-peanuts-der-film
Familie und Kinder

Die Peanuts Der Film

Charlie Brown, Snoopy und Lucy haben ihren ersten Auftritt als computeranimierte Helden.

Video Stargate Origins
Science Fiction

Stargate Origins

1930 kämpfen Professor Langford und seine Tochter noch mit den Rätseln des antiken Artefakts.

list-style position ix. x. xi. xii. xiii. padding i ii iii