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

今天在修改一个网站样式时，遇到一个问题，无论怎么调节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时列表图标不显示的问题解决的详细内容。更多信息请关注PHP中文网其他相关文章！