问CSS display：<li>标记上具有list-style-image:属性的内联属性
EN

Stack Overflow用户

提问于 2008-12-09 21:25:01

回答 6查看 101.4K关注 0票数 20

我在使用CSS的display:inline属性和<li>标签上的list-style-image:属性时遇到了问题。基本上，我想输出以下内容：

* Link 1  * Link 2

其中*表示图像。

我用下面的HTML代码来做这件事：

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

它的样式如下所示：

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); }

问题是，当列表项以内联方式显示时，与列表项相关联的图像不会出现。如果我去掉<li>标记上的display:inline属性，它们就会出现。

有没有一种方法可以使图像即使在列表项以内联方式显示时也能显示出来，或者这是不可能的？

html

css

回答 6

Stack Overflow用户

回答已采纳

发布于 2008-12-09 21:30:24

尝试使用float: left (或right)而不是display: inline。内联显示取代了列表项显示，这是添加项目符号的原因。

票数 35

Stack Overflow用户

发布于 2008-12-09 21:33:00

因此，将它们浮动起来：

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

票数 6

Stack Overflow用户

发布于 2013-07-10 23:02:47

我也有类似的问题，我用css“：before”来解决..代码如下所示：

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

票数 4

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/354288

复制

相似问题

问CSS display：<li>标记上具有list-style-image:属性的内联属性
EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS display：<li>标记上具有list-style-image:属性的内联属性EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS display：<li>标记上具有list-style-image:属性的内联属性
EN