Wissenshabitat Blog

Den Fall, das eine Liste in einem Text auftaucht in dem auch ein Bild ist, ist recht häufig. Das Problem tritt dann auf, wenn das Bild ein Inline-Element ist, also vom Text umflossen wird. Der Text der Listenelemente wird mit richtigem Abstand zum Bild positioniert, während die Punkte der Listenelemente auf dem Rand des Bildes platziert werden.

Also:

Text Text Text Text Text Text Text Text

|———|  Text Text Text Text

|———|  o Listenelement 1

|———|  o Listenelement 1

|———| Text Text Text Text

Text Text Text Text Text Text Text Text

Die Lösung liegt im CSS:

<style type="text/css">
ul{
    zoom: 1; /* for IE<= 6 */
    overflow: auto;
    margin: 0; padding: 0;
}
ul li {
    list-style-type: disc;
    margin-left: 3em; /* must stay, want it */
}
</style>