用到list-style-position:outside时列表图标不显示的问题
发布:站生 | 发布时间: 2012年4月7日今天在修改一个网站样式时,遇到一个问题,无论怎么调节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常识 (2012-4-3 10:42:51)
推荐一款CSS代码压缩工具 (2012-4-1 21:20:10)
firefox下网页布局严重错乱,ff下网站如此错乱头一次遇到 (2011-4-27 17:30:52)
2011年3月28日海南迈科企业站完工-站生又一作品 (2011-3-28 22:49:34)
收集一些常用的css技巧,不断更新中 (2011-3-23 21:37:44)
站生做网站头疼的问题 (2011-2-20 19:55:6)
蛐蛐谈firefox下margin-top失效的问题 (2010-10-26 9:57:43)
css自适应高度的建议 (2010-10-8 17:20:5)
ie6下ul margin变为两倍的解决方法 (2010-9-26 14:16:34)
css+javascript可伸缩二级菜单,非常实用 (2010-8-28 14:53:33)
- 1.xiduoduo365
- 不能为了看而看,要从中学习经验,呵
- 2012/4/7 23:17:23 回复该留言
发表评论
◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。