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