CSS Kochbuch

5.4 Listeneinträge voneinander trennen

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 Abbildung 5-3):

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

Abbildung 5-3. Die Listeneinträge werden optisch voneinander getrennt.

Diskussion

Damit die Trennlinien ...