Как совместить изображения маркеров с содержимым <li>?
Вот скриншот, чтобы было понятно. Я пытаюсь найти надежный способ сделать изображения пули вертикально выровненными по моему содержимому li. Как видите, мой контент сейчас слишком велик.
Большое спасибо 'over-flowers' ...
Ответы 4
Вы можете использовать что-то подобное в своем css ...
#content li{
list-style-image: url(../images/bullet.gif);
}
Ну, был бы полезен некоторый код css, чтобы увидеть, как вы в настоящее время устанавливаете изображения пули ;-)
Вместо фактической установки свойства list-style-image у меня были гораздо более последовательные результаты с установкой свойства background-image для элемента li. Затем вы можете управлять позиционированием с точностью до пикселя. Не забудьте установить подходящее значение для заполнения слева, чтобы содержимое элемента списка не попало в маркер.
В настоящее время я использую метод, который показал Галвэн. Я попробую ваш метод '<li> с фоновым изображением'. Похоже, у меня будет больше гибкости при выстраивании изображения :)
Я даже никогда не использовал "list-style-image", потому что когда я начал использовать CSS, он был разочарован (Netscape 4) не поддерживал его должным образом. Даже сейчас, когда все браузеры поддерживают его, я считаю, что подход «фоновое изображение» гораздо более полезен.
используйте background-image, для элементов li добавьте отступы.
.box li{
padding-left: 20px;
background-image: url("img/list_icon.jpg");
background-repeat: no-repeat;
background-position: 0px 2px;
margin-top: 6px;
}
Положение фона пикселей может создавать проблемы. Вместо этого используйте относительные квалификаторы center left. Кроме того, знаете ли вы ярлык свойства background?
да, я знаю ярлык, но мне нравятся мои подробные объявления. Позиционирование пикселей решает ту самую проблему, описанную Пикледеггом - изображения по умолчанию плохо выровнены по вертикали, и дизайн маркеров может потребовать корректировки на уровне пикселей.
Мне нравится ответ @bryn. Один пример, который я успешно использовал:
#content ul li {
margin: 3px -20px 3px 20px;
padding: 0 0 0 0;
list-style: none;
background: url(newbullet.gif) no-repeat 0 3px;
}
Отрицательное правое поле может понадобиться, а может и не понадобиться в вашем случае. В зависимости от изображения вам может потребоваться корректировка для удовлетворения ваших конкретных потребностей. (Мое изображение 14 x 15.) Вы должен специально устанавливаете поля и padding, если хотите, чтобы в браузерах был похожий вид, поскольку Firefox и IE используют разные значения по умолчанию для отображения маркеров.
спасибо, чувак, это то, что я уже использую (должен был разместить CSS!). Надеюсь, метод Брина позволит мне еще немного повозиться с выравниванием.