首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >CSS display:<li>标记上具有list-style-image:属性的内联属性

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:属性时遇到了问题。基本上,我想输出以下内容:

代码语言:javascript
复制
* Link 1  * Link 2

其中*表示图像。

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

代码语言:javascript
复制
<ol class="widgets">
    <li class="l1">Link 1</li>
    <li class="l2">Link 2</li>
</ol>

它的样式如下所示:

代码语言:javascript
复制
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属性,它们就会出现。

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

EN

回答 6

Stack Overflow用户

回答已采纳

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

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

票数 35
EN

Stack Overflow用户

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

因此,将它们浮动起来:

代码语言:javascript
复制
ol.widgets li { 
    float: left;
    margin-left: 10px;
}
票数 6
EN

Stack Overflow用户

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

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

代码语言:javascript
复制
.widgets li:before{
    content:"• ";
}
票数 4
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/354288

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档