Исчезающие пули

Question

http://biochrom.fivesite.co.uk/catalogue4.asp

На странице выше есть изображение, плавающее слева. Справа от него находится список, озаглавленный «Возможности». Элементы списка имеют фоновое изображение, однако оно не отображается. Список 2 показывает, как выглядит фоновое изображение.

Кто-нибудь знает, как я могу сделать пули видимыми?

Answer 1

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

margin-left:200px;

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

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

clear:both

... применяется к нему.

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

Answer 2

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

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

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

overflow:hidden;

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

Answer 3

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

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

display: inline-block;

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

Answer 4

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