Mit CSS Bullet Point Listenelemente einrücken

In diesem Blogbeitrag erfährst Du, wie Du mit CSS die Elemente einer Bullet Point Liste einrückst, bzw. bündig machst.

 

Darum geht’s:

Bei einem gekauften WordPress-Template sollte man eigentlich davon ausgehen, dass Styling von Listen ohne großes Zutun funktioniert. Leider ist das nicht immer so. Ich hatte aktuell den Fall, dass beim Anlegen einer Bullet-Point-Liste

a) die Schriftgröße in der Liste kleiner war als der restlichen Text
b) die Schrift in den Bullet Point Listen nicht bündig bzw. eingerückt war und
c) zwischen den einzelnen Listenelementen kein Abstand zu sehen.

Das lässt sich aber ganz leicht mit CSS beheben.

Hier siehst Du meinen ursprünglichen Text:

Schriftgröße im gesamten Text angleichen mit „font-size“

Jetzt möchte ich zunächst, dass die Schriftgröße innerhalb der Liste gleich groß ist wie die des Satzes über der Liste. Die Schriftgröße meines Satzes über der Liste beträgt 18px, die in der Liste momentan aber nur 16px. Ändern kann ich das ganz einfach, indem ich mich im CSS auf das Listenelement ul beziehe und hier mit font-size die Schriftgröße anpasse:

ul {
font-size: 18px;
}

Text der Bullet Point Listenelemente bündig machen bzw. einrücken

Das Problem der Schriftgröße haben wir also gelöst. Die Schrift der einzelnen Listenelemente ist aber immer noch nicht bündig. Um dies zu beheben, muss ich meiner CSS-Anweisung die Deklaration list-style-position: outside hinzufügen. Das Ganze sieht dann so aus:

ul {
font-size: 18px;
list-style-position: outside;
}

Gesamten Text weiter nach rechts schieben, damit die Bullet Points nicht überstehen

Wir sehen, dass der Text jetzt wie gewünscht innerhalb der Bullet Point-Listenelemente (links)bündig bzw. eingerückt ist. Nur leider stehen die Bullet Points nun links über den Text hinaus. Wir möchten ja eigentlich, dass die Bullet Points bündig mit der Überschrift und dem unter der Überschrift stehenden Satz sind und nicht links über den Text hinausstehen. Wir brauchen also einen weiteren Befehl, der die ganze Liste weiter nach rechts rückt. Da hilft ein schlichtes padding-left. Allerdings sollten wir hier nicht mit Pixeln arbeiten, sondern die Maßeinheit em. Da em immer direkt proportional zur Schriftgröße ist sieht dadurch die Liste nämlich auch in anderen Bildschirmauflösungen noch gut aus. Unsere CSS-Anweisung sieht mittlerweile also wie folgt aus:

ul {
font-size: 18px;
list-style-position: outside;
padding-left: 1em;
}

Abstand zwischen den Listenelementen vergrößern

Zu guter Letzt können wir unsere Liste noch etwas entzerren und unter den einzelnen Listenelementen einen Abstand einfügen. Hierbei greifen wir mit padding-bottom auf das einzelne Listenelement li zu:

li {
padding-bottom: 15px;
}

Fertig! 🙂

Bislang hat hier niemand kommentiert.

Poste einen Kommentar: