欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

CSS中使用list-style-position:outside时列表图标不显示的问题解决

程序员文章站 2022-04-07 11:09:31
...
今天在修改一个网站样式时,遇到一个问题,无论怎么调节css属性,一个文章列表图标却一直不显示,最后把list-style-position:outside改成list-style-position:inside时,列表图标显示出来了。为了找出list-style-position:outside不显示的原因,不断的尝试删除各种css属性来找出导致outside不显示的原因,结果却始终没有找出来一个确定的答案,不过肯定的是,ul li属性width:100%、padding:0;会对列表图标不显示造成一定的影响,如果你遇到这个问题,请注意这两个属性。

css2.0手册对outside和inside这两个参数是这样解释的:

list-style-position : outside | inside

取值:

outside:默认值。列表项目标记放置在文本以外,且环绕文本不根据标记对齐

inside:列表项目标记放置在文本以内,且环绕文本根据标记对齐

从上面的定义可以看出padding还是有影响的,不过我这里具体是哪里出了问题却一直找不出来,删除除width:100%或者padding:0之外的其它样式,均可以达到显示的效果。

问题就这样告一段落,由于样式需要,我把list-style-type取decimal阿拉伯数字这个值,当为了满足列表行超出时不自动换行这一需求时,采用了如下三个参数:

overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;

不过发现列表不以阿拉伯数字来显示了,全变成了数字1。当把overflow:hidden删掉时,问题解决了,不过省略号出不来了,于是又学到一个hack,以后得注意了。

以上就是CSS中使用list-style-position:outside时列表图标不显示的问题解决的详细内容,更多请关注其它相关文章!