视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
CSS中使用list-style-position:outside时列表图标不显示的问题解决
2020-11-27 18:50:49 责编:小采
文档

今天在修改一个网站样式时,遇到一个问题,无论怎么调节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,以后得注意了。

下载本文
显示全文
专题