CSS list-style-position

CSS List Style Position

CSS list-style-position bestimmt die Position des 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.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

Einzug, Abstand der Listensymbole

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.

Infografik: Wo sitzt der Index
HTML ul / ol Abstand der Marker-Box und Text-Box vom linken Rand ist padding

CSS list-style-position

list-style-position ist erblich – also erben verschachtelte Listen die Eigenschaft list-style-position vor ihren Vorfahren.

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.

Listen bündig zum Text

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.

  • Blade Runner 2049
    Fortsetzung des Sci-Fi Klassikers von Ridley Scott
  • Sin City
    Sin Citys ist die Stadt der Verbrecher und verlorenen Seelen.
  • Spectre
    James Bond ist mit tödlichen Bedrohungen von innen und außen konfrontiert.

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

Unveränderlicher Abstand der Listensymbole / Bullets?

Am Abstand der Listensymbole oder des Index vom Inhalt des Listenelements hat sich seit CSS 2.1 nichts geändert. inside, outside und das war's. Um diesen Abstand zu ändern, greifen Tricks – wie alle Tricks mit kleinen Einschränkungen.

  • Schicksal, wie der Mond dort oben, so veränderlich bist Du
  • Wächst Du immer oder schwindest! – Schmählich ist das Leben hier!
  • Erst misshandelt, dann verwöhnt es spielerisch den schwachen Sinn.

Der Inhalt der Listenelement sitzt in einem span-Tag, und das span-Element ist relativ positioniert mit einem Abstand von links.

.abstand li span {
	position: relative;
	left: 30px;
}

<ul class="abstand">
	<li><span>Listenelement 1</span></li>
	<li><span>Listenelement 2</span></li>
	<li><span>Listenelement 3</span></li>
</ul>

Quelle: CSS: Control space between bullet and <li>

CSS background-image legt ohne Änderungen des HTML-Markups den Abstand zwischen Listensymbolen und Text fest. Die Technik hat einen Haken: Der Einzug des Listentexts funktioniert nur in der ersten Zeile.

  • O Fortuna Velut luna Statu variabilis Semper crescis
  • Aut decrescis Vita detestabilis Nunc obdurat Et tunc curat
  • Ludo mentis aciem, Egestatem, Potestatem Dissolvit ut glaciem.

Und ein weiterer Ansatz: Wenn die minimale Höhe der li-Elemente explizit festgelegt wird, funktionieren padding und margin für den Inhalt des Listeneintrags.

  • Für richtige Kartoffelknödel braucht man natürlich in erster Linie gekochte Kartoffeln.
  • Und sie müssen am Tag vorher gekocht werden, sonst werden die Knödel beim Kochen schnell matschig.
  • Ein oder zwei Eier, Salz, kleine Portion Kartoffelmehl und ausreichend Mehl, bis sich feste Klöße formen lassen.
.rezept li { 
	min-height: 1.6em;
	padding-left: 2.4em;
}

Tipp von Mi., Rezept von meiner Mutter.

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.