Отображение CSS: встроенное свойство с list-style-image: свойство в тегах <li>

Question

У меня проблема с использованием свойства display:inline CSS со свойством list-style-image: для тегов <li>. По сути, я хочу вывести следующее:

* Link 1  * Link 2

, где * представляет изображение.

Я делаю это со следующим битом HTML:

<ol class="widgets">
    <li class="l1">Link 1</li>
    <li class="l2">Link 2</li>
</ol>

, стилизованный под следующий бит CSS:

ol.widgets { list-style-type:none; }

ol.widgets li { display:inline;
                margin-left:10px; }

ol.widgets li.l1 { list-style-image:url(image1.gif); }

ol.widgets li.l2 { list-style-image:url(image2.gif); }

Проблема заключается в том, что, когда элементы списка отображаются встроенными, изображения, связанные с элементами списка, не отображаются. Они do появляются, если я уберу свойство display:inline тега <li>.

Есть ли способ заставить изображения появляться даже тогда, когда элементы списка отображаются встроенными, или это просто невозможно?

Answer 1

Попробуйте использовать float: left (или right) вместо display: inline. Встроенное отображение заменяет отображение элемента списка, то есть то, что добавляет маркеры.

Answer 2

Вы хотите, чтобы элементы списка располагались рядом друг с другом, но не были встроенными элементами. Так что используйте вместо них:

ol.widgets li { 
    float: left;
    margin-left: 10px;
}

Answer 3

У меня была похожая проблема, я решаю с помощью css ": before" .. код выглядит так:

.widgets li:before{
    content:"• ";
}

Answer 4

Вы хотите стиль изображения и Nav с плавающей точкой друг к другу, затем используйте как это

ol.widgets ul
{
list-style-image:url('some-img.gif');
}
ol.widgets ul li
{
float:left;
}

Answer 5

Если вы посмотрите на свойство 'display' в спецификации CSS, вы увидите, что 'list-item' определенно является типом отображения. Когда вы устанавливаете элемент в «встроенный», вы заменяете тип отображения по умолчанию для элемента списка, и маркер определенно является частью типа элемента списка .

Приведенный выше ответ предлагает float, но я пробовал это, и он не работает (по крайней мере, в Chrome). В соответствии со спецификацией , если вы установите плавающие поля влево или вправо, «дисплей» игнорируется, если он не имеет значения «нет». » Я полагаю, что это означает, что тип отображения по умолчанию «list-item» исчез (с маркером в нем), как только вы перемещаете элемент.

Редактировать: Да, я думаю, я был неправ. Смотрите верхнюю запись. :)

Answer 6

Я бы посоветовал не использовать list-style-image, так как он ведет себя совершенно по-разному в разных браузерах, особенно в положении изображения

вместо этого вы можете использовать что-то вроде этого

ol.widgets,
ol.widgets li { list-style: none; }
ol.widgets li { padding-left: 20px; backgroud: transparent ("image") no-repeat x y; }

работает во всех браузерах и дает одинаковый результат в разных браузерах.