Listeneinträge voneinander trennen

(Auszug aus "CSS Kochbuch" von Christopher Schmitt)

Problem

Die Listeneinträge sollen optisch voneinander getrennt werden.

Lösung

Erzeugen Sie zuerst mit Hilfe der Eigenschaft border-top oberhalb der einzelnen Listenelemente (li) einen teilweisen Rahmen, der als Trennlinie verwendet wird:

li {
 border-top: 1px solid black;
 padding: .3em 0;
}

Damit auch unterhalb des letzten Elements eine Trennlinie angezeigt wird, erhält die Liste selbst (li) durch die Verwendung der Eigenschaft border-bottom an ihrer Unterseite einen teilweisen Rahmen (siehe die nächste Abbildung):

ul {
 margin-left: 40px;
 padding-left: 0px;
 border-bottom: 1px solid black;
 list-style: none;
 width: 36%;
}

Listeneinträge werden optisch voneinander getrennt

Abbildung: Die Listeneinträge werden optisch voneinander getrennt.

Diskussion

Damit die Trennlinien zwischen den einzelnen Einträgen auch die richtige Länge haben, geben Sie entweder margin-left oder padding-left für die ungeordnete Liste einen entsprechenden Wert. Ansonsten passen die Länge der Rahmen für die Listeneinträge und die für die Liste selbst nicht zusammen. Wurden die Listeneinträge beispielsweise per padding-left eingerückt, so wird der untere Rahmen (für die Liste selbst) länger dargestellt als die Rahmen für die einzelnen Listeneinträge (siehe nächste Abbildung):

li {
 border-top: 1px solid black;
 padding: .3em 0;
}
ul {
 margin-left: 0px;
 padding-left: 40px;
 border-bottom: 1px solid black;
 list-style: none;
 width: 36%;
}

Untere Rahmen für die Liste selbst ist länger als Rahmen für Listeneinträge

Abbildung: Der untere Rahmen für die Liste selbst ist länger als die Rahmen für die Listeneinträge.

Siehe auch

Das Rezept Browserübergreifende Einrückungen zum Erzeugen von browserübergreifenden Einrückungen für Listen.

  

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