Sie sind hier: Startseite · Artikel · Float & Liste

Eine Liste neben einem gefloateten Element korrekt darstellen

Hinweis:
Dieser Artikel ist älter als 18 Monate / wurde seit 18 Monaten nicht aktualisiert. Dies kann (muss aber nicht) dazu führen, dass der Artikel, und / oder darin beschriebene Techniken, nicht mehr aktuell sind. Bitte berücksichtigen Sie diesen Hinweis bei der Lektüre.

Die Aufgabenstellung

Links ein Bild, rechts davon eine Liste. An dieser einfach klingenden Vorgabe bin ich bisher immer wieder gescheitert, so sehr ich mich auch bemühte.

Dabei sollte die Lösung mittels CSS-Anweisung float ganz einfach sein:

<img src="beispiel.png" style = "float:left; margin-right:1em" /> <ul> <li> … usw.

Das sollte ja eigentlich genügen. Tut es aber nicht! Die Listenpunkte kleben am Bild, statt in gebührendem Abstand (margin) daneben zu stehen, oder verschwinden sogar ganz (Internet Explorer /  Edge). Verschachtelte Listen werden nicht korrekt eingerückt.

Die Lösung

Es ist wirklich ganz einfach – wenn man mal weiß, wie es geht.

Ich stelle die Lösung / den Code in einem Pen (CodePen) vor. Dort kann jeder selbst probieren, und sich das Vorher – Nachher anschauen.

Klar, heute löst man das universell und elegant mit CSS-Flexboxen oder Grid. Aber wenn nur eine einzige Liste Ärger macht, muss man ja nicht gleich mit Kanonen auf Spatzen schießen.

Zur Anwendung kommt das Ganze in diesem Artikel.

Und wie dort die Details der Liste mit [+] bzw. [−] auf- und zugeklappt werden, steht in diesem Artikel.

Artikeltexte und Code-Snippets: Creative Commons CC BY-SA 4.0
Medien (Bilder, Videos, Audios) sind evtl. urheberrechtlich geschützt.