在网页开发过程中，我们经常会使用ul、ol来制作各类列表，但有时候写好代码后列表却无法正常显示，下面我们来逐一分析可能的原因和对应的解决方法。
常见原因排查
1. list-style属性设置错误
如果给列表元素设置了list-style:none或者list-style-type:none，列表前面的标记就会被隐藏，要是同时没有设置其他显示样式，可能会误以为列表不显示。
2. 元素display属性被覆盖
如果列表元素或者被列表包裹的li元素被设置了display:none，整个列表都会被隐藏，另外如果设置了display:inline但没有做好布局适配，也可能导致列表看起来没有正常显示。
3. 列表内容为空或未正确填充
如果ul或者ol标签内部没有li子元素，或者li内部没有内容，列表自然不会在页面上显示任何内容，这种情况很容易被忽略。
4. 容器样式限制
如果列表的父容器设置了overflow:hidden且高度不够，或者设置了visibility:hidden，也会导致列表无法显示。
解决方案与代码示例
基础列表样式修复
如果是因为list-style属性设置问题，可以重新设置正确的列表样式：
/* 无序列表显示实心圆标记 */
ul {
list-style-type: disc;
/* 确保列表有默认的内边距，避免标记被裁掉 */
padding-left: 20px;
}
/* 有序列表显示数字标记 */
ol {
list-style-type: decimal;
padding-left: 20px;
}display属性异常修复
如果是display属性被错误设置，可以重置列表的display属性：
/* 确保ul和li都是块级元素正常显示 */
ul, ol {
display: block;
}
li {
display: list-item;
}内容填充与容器样式调整
首先确保列表内部有正确的内容：
<ul>
<li>列表项一</li>
<li>列表项二</li>
<li>列表项三</li>
</ul>如果是父容器样式限制，调整父容器样式：
/* 父容器避免隐藏列表内容 */
.list-container {
overflow: visible;
height: auto;
visibility: visible;
}快速排查步骤
遇到列表不显示时，可以按照以下步骤快速定位问题：
- 先检查HTML结构，确认ul/ol内部有li元素且li有内容
- 打开浏览器开发者工具，查看列表元素的computed样式，检查display、visibility、list-style相关属性的值
- 检查列表父容器的样式，看是否有overflow、height等限制导致内容被隐藏
- 逐步注释掉自定义的CSS样式，恢复到默认样式看列表是否显示，定位是哪个样式导致的异常
注意：如果是使用第三方CSS框架，可能存在样式优先级问题，需要使用更高优先级的选择器覆盖默认的错误样式。
CSS列表list-styledisplay属性HTML列表标签修改时间：2026-05-29 17:37:07