CSS重置后ol/ul列表标记消失问题排查求助
排查base.css导致列表标记不显示的方法
- 检查
ol/ul的list-style-type属性:哪怕li的display是list-item,如果父元素的这个属性被base.css设为none,标记会直接隐藏。在浏览器开发者工具里查看这两个标签的该属性,确认是否被base.css的规则覆盖。 - 核查
list-style-position与容器溢出:如果list-style-position设为outside,但父容器.container有overflow: hidden,或者列表元素设置了负边距,标记可能被挤出可视区域。 - 检查
padding-left/margin-left值:ol/ul默认靠左侧内边距容纳标记,要是base.css把这两个值重置为0,标记会左移到容器外,自然看不到。 - 排查全局重置规则:不少base.css会写类似
* { margin: 0; padding: 0; list-style: none; }的全局选择器,直接把所有列表的样式重置了,这是常见诱因。 - 用开发者工具溯源样式:在元素面板里查看
ol/ul的所有应用样式,筛选出base.css来源的规则,重点看涉及list-style、边距、溢出的条目。
内容的提问来源于stack exchange,提问作者Louis Declerck
相关产品推荐
相关产品推荐

