CSS display: list-item

Darstellung als Listenelemente

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

table td {
  display: list-item;
}