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

Question

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

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

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

Answer 1

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

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

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

overflow:hidden;

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

Answer 2

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

margin-left:200px;

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

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

clear:both

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

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

Answer 3

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

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

display: inline-block;

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

Answer 4

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