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.
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
- vivat nostra civitas maecenatum caritas quae nos hic protegit!
- Pereat tristitia pereant osores
- pereat diabolus quivis antiburschius atque irrisores
outside
- vivat nostra civitas maecenatum caritas quae nos hic protegit!
- Pereat tristitia pereant osores
- 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.
Mann unter Feuer
Der abgewrackte Navy-Soldat Creasy übernimmt einen Bodyguard-Job in Mexiko.
Die Peanuts Der Film
Charlie Brown, Snoopy und Lucy haben ihren ersten Auftritt als computeranimierte Helden.
Stargate Origins
1930 kämpfen Professor Langford und seine Tochter noch mit den Rätseln des antiken Artefakts.
