Исчезающие маркеры

У вашего изображения есть свойство float: left. Таким образом, элементы списка отображаются «позади» изображения.

margin-left:200px;

на элементе UL решит вашу проблему.

В качестве альтернативы вы можете применить float: left к вашему UL-элементу. Это заставит его плавно перемещаться прямо к изображению, но в той же строке появится следующий контент. Вы можете предотвратить это с помощью очистка UL-элемента или добавив элемент после UL-элемента с помощью ...

clear:both

... применительно к нему.

Более подробную информацию об этом поведении можно найти на http://www.positioniseverything.net/easyclearing.html.

В качестве альтернативы вы можете использовать свойство list-style-image вместо background-image. На днях я столкнулся с этой самой проблемой: поведение обтекания текстом, которое плавающие объекты проявляют на своих «соседях», применяется только к «контенту», а не к фоновым изображениям (например).

Я знаю, что это пост годичной давности, но другие могут захотеть узнать ...

Что произойдет, если вы используете систему управления контентом и на некоторых страницах есть изображения, а на некоторых вы не хотите, чтобы элементы вашего списка были размером 200 пикселей в содержимом?

Вы можете добавить этот CSS в свой элемент UL / OL:

overflow:hidden;

Надеюсь, это поможет.

Эта ветка действительно старая, но всегда актуальная ...

Другое альтернативное решение:

display: inline-block;

Ставьте этот на UL. Он заставляет всю ul появляться после float. Таким образом, у вас может быть страница с изображением или без него, и она всегда будет отображаться правильно (проверено в FF4, IE7 и 8, Chrome 11).