CSS, HTML und Javascript mit {stil}

CSS list-style-position

CSS list-style-position

CSS 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.

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 Listmarker-Box und Text-Box ist margin oder padding je nach BrowserCSS list-style-positionCSS list-style-positionix.x.xi.xii.vivat nostra civitasmaecenatum caritasquae nos hic protegit!Pereat tristitiapereant osorespadding / margin

Alle Browser ziehen ul / ol 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

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

sitzt die Liste linksbündig innerhalb des umfassenden 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 margin-left 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.

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.