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

У меня возникла проблема с использованием свойства CSS display:inline с свойством 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); }

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

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

Ответы

Ответ 1

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

Ответ 2

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

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

Ответ 3

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

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

Ответ 4

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

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

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

Ответ 5

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

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

Ответ 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; }

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