在网页开发过程中，我们经常会用到无序列表ul和有序列表ol来展示导航、商品列表等内容，但有时候明明写了列表的HTML结构，页面上却看不到列表的显示效果，这时候就需要一步步排查问题所在。
第一步：检查HTML列表结构是否正确
首先要确认列表的基础HTML结构有没有写错，如果结构本身有问题，CSS样式再正确也无法正常显示。正确的无序列表和有序列表结构如下：
<!-- 无序列表结构 --> <ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> </ul> <!-- 有序列表结构 --> <ol> <li>第一项</li> <li>第二项</li> <li>第三项</li> </ol>
排查时要注意：列表标签是否闭合，有没有把<li>标签写在ul或ol外部，列表项内部是否有实际内容，如果<li>标签内为空，即使样式正确也可能看不到显示效果。
第二步：检查列表的display属性设置
display属性是控制元素是否显示的核心属性，如果列表的display被设置为none，或者设置成了不符合列表展示的值，就会导致列表不显示。
常见的错误设置场景：
- 全局CSS或者第三方样式库中，不小心给ul、ol设置了
display: none; - 给列表设置了
display: inline;且父容器宽度不足，导致列表被挤到不可见区域 - 列表的父元素设置了
display: none;，子列表也会跟随隐藏
可以通过浏览器开发者工具选中列表元素，查看Styles面板中的display属性值，如果是none，修改为display: block;（列表默认display值）即可恢复显示。
第三步：检查列表样式是否被覆盖
CSS的层叠规则会导致后写的样式或者优先级更高的样式覆盖之前的列表样式，这也是列表不显示的常见原因。
比如下面的样式冲突场景：
/* 初始设置的列表样式 */
ul {
list-style: disc;
display: block;
color: #333;
}
/* 后面引入的样式或者更高优先级的样式覆盖了前面的设置 */
.container ul {
display: none; /* 这里把列表隐藏了 */
list-style: none;
}排查时可以在开发者工具的Styles面板中，查看列表对应的CSS规则，看有没有被划掉的无效样式，或者有没有隐藏类的样式应用在列表上，找到冲突的样式后调整优先级或者修改对应规则即可。
第四步：检查父容器的限制样式
有时候列表本身样式没有问题，但是父容器的样式限制了列表的显示，比如父容器设置了overflow: hidden;且高度不够，或者父容器设置了visibility: hidden;。
可以通过以下方式排查：
- 查看父容器的height、overflow属性，如果父容器高度小于列表总高度，且overflow为hidden，列表超出部分会被隐藏
- 检查父容器是否有
visibility: hidden;设置，该属性会让元素不可见但保留占位，和display:none的隐藏效果不同 - 查看父容器是否有
opacity: 0;的设置，透明度为0时元素也会看不到
第五步：检查列表项的基础样式
如果列表本身显示，但是列表项看不到，还要检查列表项的样式设置：
- 列表项的color是否和背景色一致，导致内容看不见
- 列表项是否设置了
font-size: 0;，导致文字大小为零无法显示 - 列表项是否有
text-indent负值过大，导致文字被移到可视区域外
比如下面的错误设置：
li {
color: #fff; /* 背景也是白色，文字看不见 */
font-size: 0; /* 文字大小为0，无法显示 */
}修改列表项的color和font-size为正常数值，就可以让列表项内容正常显示。
常见场景解决示例
假设我们有一个不显示的导航列表，HTML结构如下：
<div class="nav">
<ul class="nav-list">
<li>首页</li>
<li>产品</li>
<li>关于我们</li>
</ul>
</div>排查后发现CSS中有如下错误设置：
.nav-list {
display: none; /* 错误：隐藏了列表 */
list-style: none;
}
.nav-list li {
color: #fff;
background-color: #fff; /* 错误：文字和背景同色 */
}对应的解决方法就是修改CSS：
.nav-list {
display: block; /* 恢复列表显示 */
list-style: disc;
padding-left: 20px;
}
.nav-list li {
color: #333; /* 修改文字颜色，和背景区分 */
background-color: #fff;
font-size: 16px;
}修改后刷新页面，列表就可以正常显示了。