CSS显示:在<li>标签上使用list-style-image:property的内联属性

Question

我在使用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>

有没有办法让图像显示,即使列表项是内联显示,或者这是不可能的？

Answer 1

尝试使用float: left(或right)代替display: inline.内联显示替换列表项显示,这是添加项目符号的内容.

Answer 2

您希望列表项彼此相邻排列,但不是真正的内联元素.所以漂浮他们:

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