CSS Kochbuch

5.10 Hängende Einzüge für Listen definieren

Problem

Die erste Zeile eines Listeneintrags soll weiter links stehen als der Rest, wodurch eine sogenannte «hängende» Einrückung erzeugt wird (siehe Abbildung 5-16).

Abbildung 5-16. Hängende Einzüge in einer Liste

Lösung

Benutzen Sie die Eigenschaft text-indent mit einem negativen Wert:

ul {
 width: 30%;
 padding: 0 0 0.75em 0;
 margin: 0;
 list-style: none;
}
li {
 text-indent: −1.75em;
 margin: 0.33em 0.5em 0.5em 1.5em;
}

Diskussion

Zwar helfen die Aufzählungszeichen (numerisch, grafisch oder textbasiert) dabei, die Aufmerksamkeit auf die Liste zu lenken, gelegentlich wollen Sie aber auf diese Designelemente verzichten. ...