CSS – (msc) Mit den beiden HTML-Tags UL und OL richtet man Listen mit Aufzählungszeichen und nummerierte Listen ein. Die Listen werden vom Browser automatisch eingerückt. Das Aufzählungszeichen bzw. die Nummer ist um etwa dreissig Pixel eingerückt.
Man kann die Listen zwar in vielfältiger Weise formatieren und beispielsweise das Aufzählungszeichen wählen, doch die Einrückung ist sakrosankt. Das Aufzählungszeichen direkt am linken Seitenrand zu platzieren, ist nicht, bzw. nur auf Umwegen möglich. Folgende Möglichkeiten bestehen:
- Man kann das LI-Tag für sich stehend verwenden (ohne UL– oder OL-Umklammerung): Der Internet Explorer zeigt dann eine linksbündige Liste ohne Einrückung. Die Sache hat zwei Hacken: Die Lösung ist nicht HTML-konform und der Firefox-Browser zeigt die Aufzählungszeichen nicht an.
- Man löst die Aufgabe über eine Tabelle: Das ist mit Kanonen auf Spatzen geschossen, aber es klappt.
- Auch CSS bietet eine Möglichkeit. Das folgende Statement rückt die Liste an den linken Rand:
ol, ul {margin-left: 0; padding-left: 0; list-style-position: inside}
Allerdings ist mit dieser Lösung alles linksbündig; es gibt kein hängendes Aufzählungszeichen mehr. Das kann man durch entsprechende Einrückungsangaben kompensieren: Über margin-left rückt man die Textzeilen ein. Der gleiche Zahlenwert mit negativem Vorzeichen bei text-indent rückt die erste Zeile mit dem Aufzählungszeichen aus:
li {margin-left: 12px;text-indent:-12px}
Das ist etwas gebastelt, aber im Resultat einigermassen befriedigend. Empfehlenswert ist jedoch, als «Bullet» eine Grafik zu verwenden, deren genaue Breite man kennt – so lässt sich die manuelle Ein- und Ausrückung besser steuern.