Вопрос
http://biochrom.fivesite.co.uk/catalogue4.asp р>
На странице выше есть изображение, плавающее слева. Справа от него находится список, озаглавленный «Возможности». Элементы списка имеют фоновое изображение, однако оно не отображается. Список 2 показывает, как выглядит фоновое изображение.
Кто-нибудь знает, как я могу сделать пули видимыми?
Решение
Ваше изображение имеет свойство float: left. Таким образом, элементы списка отображаются «позади» изображение.
margin-left:200px;
в элементе UL решит вашу проблему.
Кроме того, вы можете применить float: left к вашему UL-элементу. Это заставит его плавать прямо к изображению, но заставит следующий контент появиться в той же строке. Вы можете предотвратить это, очистив UL-элемент или добавив элемент после UL-элемента с помощью ...
clear:both
... применяется к нему.
Дополнительную информацию об этом поведении можно найти по адресу http://www.positioniseverything.net/easyclearing. HTML .
Другие советы
Я знаю, что это годичный пост, но другие могут захотеть узнать ...
Что произойдет, если вы используете систему управления контентом, а на некоторых страницах есть изображения & amp; некоторые, разве вы не хотели бы, чтобы содержимое вашего списка составляло 200 пикселей в содержании?
Вы можете добавить этот CSS к вашему элементу UL / OL:
overflow:hidden;
Надеюсь, это поможет.
Эта ветка действительно старая, но всегда актуальная ...
Другое альтернативное решение:
display: inline-block;
Поместите это в UL . Это заставляет весь ul появляться после плавания. Таким образом, вы можете иметь страницу с изображением или без него, и оно всегда будет отображаться правильно (проверено на FF4, IE7 и 8, Chrome 11).
Кроме того, вы можете использовать свойство list-style-image вместо background-image. Я столкнулся с этой самой проблемой на днях: поведение обтекания текста, которое проявляется у их «соседей», относится только к «контенту», а не к фоновым изображениям (например).