最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

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

来源:懂视网 责编:小采 时间:2020-11-27 18:50:49
文档

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

CSS中使用list-style-position:outside时列表图标不显示的问题解决:今天在修改一个网站样式时,遇到一个问题,无论怎么调节css属性,一个文章列表图标却一直不显示,最后把list-style-position:outside改成list-style-position:inside时,列表图标显示出来了。为了找出list-style-position:outside
推荐度:
导读CSS中使用list-style-position:outside时列表图标不显示的问题解决:今天在修改一个网站样式时,遇到一个问题,无论怎么调节css属性,一个文章列表图标却一直不显示,最后把list-style-position:outside改成list-style-position:inside时,列表图标显示出来了。为了找出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时列表图标不显示的问题解决

CSS中使用list-style-position:outside时列表图标不显示的问题解决:今天在修改一个网站样式时,遇到一个问题,无论怎么调节css属性,一个文章列表图标却一直不显示,最后把list-style-position:outside改成list-style-position:inside时,列表图标显示出来了。为了找出list-style-position:outside
推荐度:
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top