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

* Link 1  * Link 2

其中*代表一个图像.

我正在用以下的HTML做这个:

    
Link 1
    
Link 2

使用以下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

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

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

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

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