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.
Ein Text davon
Ein langer Text über zwei oder noch mehr Zeilen mit einem Listensymbol vor der ersten Zeile
Ein Text dahinter
.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.
Ein Text davon
Ein langer Text über zwei oder noch mehr Zeilen mit einem Listensymbol vor der ersten Zeile
Ein Text dahinter
.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; }
Schraubverschluss | braun | 42 mm | € 4,80 |
Schraubverschluss | weiß | 60 mm | € 6,20 |
Kappe | braun | 42 mm | € 3,90 |
Kappe | weiß | 60 mm | € 5,40 |
Schraubverschluss | braun | 42 mm | € 4,80 |
Schraubverschluss | weiß | 60 mm | € 6,20 |
Kappe | braun | 42 mm | € 3,90 |
Kappe | weiß | 60 mm | € 5,40 |