Das Aufzählungszeichen innerhalb des Eintrags darstellen

(Auszug aus "CSS Kochbuch" von Christopher Schmitt)

Problem

Der Marker soll innerhalb der Box für den Listeneintrag dargestellt werden, wie in der folgenden Abbildung gezeigt. Dadurch umfließt der Text den Marker.

Marker innerhalb des Listeneintrags darstellen

Abbildung: Den Marker innerhalb des Listeneintrags darstellen.

Lösung

Benutzen Sie die Eigenschaft list-style-position mit dem Wert inside:

li {
 list-style-position: inside;
 width: 33%;
 padding: 0;
 margin: 0;
}
ul {
 margin: 0;
 padding: 0 0 0 1em;
}

Diskussion

In der Regel werden die Listenmarker außerhalb der Einträge dargestellt, wodurch das typische Listen-Layout zustande kommt. In manchen Designs soll das Aufzählungszeichen aber vielleicht zusammen mit dem Text erscheinen, um beispielsweise auf der linken Seite nicht zu viel Leerraum entstehen zu lassen. Dieses Rezept kann visuell noch aufgewertet werden, wenn Sie Ihren eigenen Marker verwenden wie in der nächsten Abbildung, wo anstelle des Standardmarkers Pfeile benutzt wurden.

Eigener Marker innerhalb des Listeneintrags

Abbildung: Ein eigener Marker innerhalb des Listeneintrags.

Siehe auch

Die CSS 2.1-Spezifikation zur Eigenschaft list-style-position.

  

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright der deutschen Ausgabe © 2007 by O’Reilly Verlag GmbH & Co. KG
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS Kochbuch" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

O’Reilly Verlag GmbH & Co. KG, Balthasarstr. 81, 50670 Köln