CSS display: list-item

Darstellung als Listenelemente

display: list-item ist interessant, wenn mehrere Zeilen mit einem Symbol oder Icon hervorgehoben werden. Die klassische Methode – ::before – kann die zweite oder dritte Zeile nicht einrücken. Listen-Elemente setzen ein Listensymbol vor die erste Zeile und setzen zweite und folgende Zeilen eingerückt. Das Listensymbol des li-Elements in einer ungeordneten Liste ul lässt sich einfach per CSS gegen ein beliebiges Symbol austauschen.

Dieses Verhalten kann mit display: list-item auf beliebige HTML-Elemente angewendet werden.

.list {
    display: list-item;
    list-style-image: url(igel.png);
}

Der Text schließt weiterhin linksbündig zum umfassenden Element, das Listen-Symbol liegt außerhalb des Elternelements: Die Browser ziehen das künstliche Listenelemente nach links aus.

Da hilft nur ein Einzug mit margin oder padding zum linken Rand.

.list {
    display: list-item;
    list-style-image: url(igel.png);
    margin-left: 38px;
}

Tabellen seriell mit display: list-item

Eine Tabelle serialisieren – dass ist eine einfache und elegante Methode, um eine Tabelle responsiv auf den kleinen schmalen Viewports von Handys darzustellen.

table.variations td,
table.variations th {
	display: list-item;
	list-style-type:none;
}

display:list-item listet die Zellen der Tabellenzeilen nacheinander statt nebeneinander.