Schwieriges Thema, scheint ein Bug von den Browsern zu sein, dass man Listen nicht korrekt rechts um Elemente fließen lassen kann. Hatte das Problem auch mal, weiß aber nicht mehr, wie ich das gelöst hatte.
Ich kenne 2 Lösungen:
1.
HTML-Code:
ul,
ol {
overflow: hidden;
}
Dann hat die Liste den korrekten Abstand rechts zum Bild, aber sie fließt nicht unter dem Bild am linken Rand weiter sondern behält diese Einrückung.
2.
HTML-Code:
ul,
ol {
padding-left: 0;
}
li {
position: relative;
left: 1.125em;
}
Diese Werte sind für Listen mit Aufzählungszeichen linksbündig mit normalem Text. Willst du Listen allgemein nochmal einrücken, kannst du das über die Eigenschaft left von LI regeln. left:2.25em.
Ich meine die Lösung, die ich damals hatte war mit dem Pseudo :before oder mit list-style-image, aber die ist zu aufwändig, wenn man eine OL benutzt.
Die Lösung mit list-style-position:inside ist nur schön, solange man einzeilige Listenpunkte hat. Bei mehrzeiligen beginnt der Text ja dann unter dem Aufzählungszeichen.
Lesezeichen