HTML-Listen sind ein praktisches Werkzeug, um Inhalte auf einer Webseite zu strukturieren und übersichtlich zu präsentieren. Dabei ist es wichtig, dass sowohl die Aufzählungszeichen als auch der Abstand zwischen den Aufzählungszeichen und dem Text ansprechend gestaltet werden. In diesem Artikel erfährst du, wie du den Abstand in HTML-Listen anpassen und die Aufzählungszeichen farblich gestalten kannst, um die Lesbarkeit und das Erscheinungsbild deiner Liste zu verbessern.
Aufzählungszeichen der Auszeichnungen
Bevor wir in die Details gehen, werfen wir einen kurzen Blick auf die verschiedenen Elementnamen und Attribute, die bei HTML-Listen verwendet werden. Die Elementnamen ul, ol, dl und li stehen für ungeordnete Listen (unordered list), geordnete Listen (ordered list), Definitionslisten (definition term) und Listenelemente (list item).
Textfarbe und Abstand vom Rand
Die Farbe der Aufzählungszeichen und des Textes in einer Liste kannst du mit dem style-Attribut im Start-Tag der Liste festlegen. Mit style="color: royalblue;" kannst du beispielsweise die Farbe der gesamten Liste, der Aufzählungszeichen und des Textes ändern. Um den Abstand der Aufzählungszeichen zum Rand anzupassen, kannst du das list-style-position-Attribut verwenden. Mit style="list-style-position: inside;" wird der Abstand erhöht, während der Text weiterhin unter den Aufzählungszeichen bleibt. Standardmäßig sind die Aufzählungszeichen am Rand positioniert. Mit style="list-style-position: outside;" oder dem Elementnamen li kannst du diesen Abstand ändern.
Text farbig
<ul>
<li style="color: royalblue;">Aufzählungspunkt</li>
</ul>… mit Abstand vom Rand
<ul>
<li style="list-style-position: inside;">Aufzählungspunkt</li>
<li style="list-style-position: outside;">Aufzählungspunkt</li>
<li style="padding-left: 30px;">Aufzählungspunkt</li>
</ul>Extra Einrückung des Textes
<ul>
<li style="padding-left: 20px;">Aufzählungspunkt</li>
</ul>… mehr Zeilenabstand
<ul>
<li style="margin-bottom: 12px;">Aufzählungspunkt</li>
<li style="margin: 12px 0;">Aufzählungspunkt</li>
</ul>In Kombination
Wenn du verschiedene Effekte kombinieren möchtest, kannst du dies ganz einfach tun. Hier sind einige Beispiele:
- Normaler Listenpunkt
<ul>
<li>Normaler Listenpunkt</li>
</ul>- Normale Textauszeichnung
<ul>
<li style="color: royalblue;">Gesamte Liste, Aufzählungszeichen und Text sind farbig</li>
<li style="padding-left: 20px;">Extra Einrückung des Textes zum Aufzählungspunkt</li>
</ul>- Aufzählungszeichen mit mehr Abstand zum Rand
<ul style="list-style-position: inside; color: mediumblue;">
<li style="color: mediumblue;">Aufzählungszeichen mit mehr Abstand zum Rand</li>
<li style="color: mediumblue; list-style-position: outside;">Standardabstand zum Rand</li>
</ul>- Gesamte Liste mit mehr Abstand zum Rand
<ul style="padding-left: 30px; color: navy;">
<li>Listenpunkt mit mehr oder weniger Abstand zum Rand</li>
</ul>- Größerer Zeilenabstand zwischen den Listenpunkten
<ul>
<li style="color: navy; margin-bottom: 12px;">Aufzählungspunkt mit größerem Zeilenabstand</li>
<li style="color: navy; margin: 12px 0;">Aufzählungspunkt mit größerem Zeilenabstand</li>
</ul>- Gemeinsame Farbe und Einrückung für die gesamte Liste
<ul style="color: navy;">
<li>Listenpunkt mit gemeinsamer Farbe und Einrückung</li>
</ul>- Unterpunkte mit Einrückung und individuellem Abstand
<ul>
<li>Listenpunkt ohne Einrückung</li>
<li>
<ul>
<li style="margin: 12px 0;">Unterpunkt mit individuellem Abstand</li>
</ul>
</li>
</ul>Wie du siehst, gibt es verschiedene Möglichkeiten, Listenpunkte zu gestalten. Du kannst die Formatierung direkt im HTML-Text-Editor oder über CSS mit Klassen definieren, um mehr Flexibilität und Wartbarkeit zu gewährleisten.
Bemerkungen:
Beachte, dass es nicht empfehlenswert ist, das line-height-Attribut im Start-Tag <li> zu verwenden, da dies zu überlappenden Abständen nach oben und unten führen kann. Es ist jedoch möglich, den Zeilenabstand im gesamten Listenbereich anzupassen, indem du das line-height-Attribut zum <ul>– oder <ol>-Tag hinzufügst. Zusätzlich kannst du mit dem margin-bottom-Attribut oder margin: 12px 0; im <li>-Tag den Abstand zwischen den Listenpunkten erhöhen, um die Aufmerksamkeit auf sie zu lenken.
CSS für den ständigen Gebrauch:
li { margin: 10px 0; }…und für den teilweisen Gebrauch mit dem Attributnamen class:
.sep-li { margin: 10px 0; }Im HTML-Text-Editor fügst du die Class-Definition im CSS hinzu:
<li class="sep-li">Ein Vorteil der Verwendung von CSS-Klassen zur Auszeichnung von Listenelementen besteht darin, dass du die Abstände zwischen den Unterpunkten beibehalten kannst, während jedes <li>-Tag einzeln ausgezeichnet werden muss. Die Verwendung von CSS-Klassen und Selektoren kann jedoch etwas mehr Aufwand erfordern. Die Trennung von Inhalt und Layout erleichtert jedoch die Wartbarkeit und Flexibilität deiner Webseite.
Weitere Informationen zu Listenelementen findest du in unserem Artikel “Bild anstatt Aufzählungszeichen, auch im Menü”.
Aktualisiert im März 2023.
Anhang
Die Nummerierung unterbrechen und fortsetzen
Manchmal möchtest du möglicherweise die Nummerierung einer geordneten Liste unterbrechen und an einer späteren Stelle fortsetzen. Das ist möglich, indem du das start-Attribut im <ol>-Tag verwendest. Hier ein Beispiel:
<ol>
<li>Erster Punkt</li>
<li>Zweiter Punkt</li>
</ol>
... und so geht es mit Nummer 3 weiter!
<ol start="3">
<li>Dritter Punkt</li>
</ol>Die Schriftgröße von Listen ändern
Die Schriftgröße von Listen kann mit CSS auf einfache Weise angepasst werden. Beachte jedoch, dass die Auswirkungen von Schriftgrößen innerhalb einer Webseite von der Vererbung abhängen können. Hier ist ein Beispiel, wie du die Schriftgröße von Listen ändern kannst:
#content ol, #content ul { font-size: 110%; font-weight: 300; }
#content li > ul, #content li > ol { font-size: 100%; }Mit diesen CSS-Regeln änderst du die Schriftgröße der Listen im Bereich mit der ID content. Du kannst die Werte für font-size und font-weight an deine Bedürfnisse anpassen.
Das war’s! Mit diesen Tipps und Tricks kannst du die Aufzählungszeichen und den Abstand in deinen HTML-Listen verbessern und sie optisch ansprechender gestalten.
