UL und LI: HTML-Liste linksbündig ohne einrücken

Normalerweise zeigen die Browser die <ul> Listen mit einer Einrückung an: die einzelnen Listenpunkt <li> sind mit kleinem Abstand nach links eingerückt. Für Listen-Aufzählungen ist das zwar praktisch, kann aber stören, wenn man das Layout der Seite etwas genauer planen muss. Hier hilft unser Tipp: Damit kann man den Abstand entweder so einstellen, wie er sein soll – oder aber die Einrückung ganz weglassen, damit die einzelnen LI Elemente linksbündig angezeigt werden.

UL linksbündig: So bleibt die Liste links!

Damit die Listen-Punkte linksbündig angezeigt werden, muss man im UL Element den Abstand einstellen und per CSS soohl die Werte für Margin und Padding auf “0” setzen. Möchte man den Abstand der Listenpunkte selbst einstellen, kann man hier selber einen Wert vorgeben, den die Browser dann einstellen: So kann man angeben, wie weit die einzelnen Listen-Elemente nach rechts eingerückt angezeit werden.

Der Code für das Einrücken ist ganz einfach: In das UL Element werden die padding und margin Abstände direkt geschrieben – oder per CSS-Klasse:

<ul style="margin:0;padding:0;">
<li>Punkt 1</li>
<li>Punkt 2</li>
</ul>

oder:

<style type="text/css">
.liste { margin:0; padding:0; }
</style>

<ul class="liste">
<li>Punkt 1</li>
<li>Punkt 2</li>
</ul>

Mit dem linksbündig setzen der Liste rutscht dann aber, wenn man margin und padding auf “0” setzt, auch der Listenpunkt zu Beginn eines jeden LI Elements nach links aus dem eigentlichen Textbereich heraus. Hier hilft es dann, den Listenpunkt mit “list-style:none” im UL Tag zu deaktivieren.

 
HTML Liste linksbündig: So sieht es aus:

• Punkt 1
• Punkt 2

 
HTML Liste linksbündig und ohne Punkte:

• Punkt 1
• Punkt 2

Der Quellcode dazu:

<ul style="margin:0;padding:0;list-style:none;">
<li>Punkt 1</li>
<li>Punkt 2</li>
</ul>