У меня возникла проблема с использованием свойства 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>
.
Есть ли способ сделать изображения отображаемыми, даже когда элементы списка отображаются в строке или это просто невозможно?