CSS无序列表项目符号不显示问题求助及相关疑问

一、无序列表项目符号不显示的排查与解决 #

• 先查全局重置：检查有没有类似 * { list-style: none; } 或 ul { list-style: none; } 的规则，这是项目符号消失最常见的原因。如果有，要么删掉这条规则，要么给目标ul单独设置 list-style-type: disc;（默认实心圆点）。
• 确认display属性：ul默认是display: block，如果被改成inline、flex等，项目符号可能不显示。把ul的display改回block，或者给li设置display: list-item（li默认就是这个，但若被覆盖就手动加）。
• 检查padding-left：如果ul的padding-left: 0，项目符号会被挤出视口看不到。给ul加padding-left: 1.5em，这是适配默认项目符号位置的常用值。
• 排查样式优先级：用浏览器F12开发者工具看ul的计算样式，找到list-style-type是否被划掉，看看是哪个高优先级选择器（比如ID选择器、带类名的选择器）覆盖了你的规则。如果是，要么提高你的选择器优先级（比如article .content ul），要么用!important临时测试（不推荐长期用）。
• 直接给li设置样式：试试article ul li { list-style-type: disc; }，有时候ul的样式会被li的单独规则覆盖。

二、重置样式导致文档塌陷的原因 #

是的，大多数重置样式（比如常见的全局重置代码）会把所有元素的默认margin、padding设为0，部分还会重置border。浏览器原本会给body、p、ul、h1~h6等元素设置默认边距，重置后这些默认值被清空，内容就会挤在一起出现“塌陷”。

解决办法是在重置样式之后，手动给需要的元素添加边距，比如：

body {
  margin: 0;
  padding: 1rem; /* 给body加内边距，让内容不贴边 */
}
ul {
  padding-left: 1.5em; /* 让ul的项目符号显示出来 */
}
p {
  margin-bottom: 1rem; /* 给段落加底部外边距，拉开间距 */
}

内容的提问来源于stack exchange，提问作者slyprogrammer