CSS设置li列表白色项目符号时错位、导航栏误显符号如何解决

问题根源 #

你写的代码有两个致命问题，才会导致错乱和导航栏误显示：

• 全局选中了所有li标签，导航栏、页脚等所有位置的列表项都会被加上伪元素圆点
• li::before设置了display: block+max-width:0;max-height:0，完全破坏了正常文档流，导致排版错位

直接能用的修复代码 #

第一步：限定样式生效范围 #

不要直接给所有li加样式，只给你需要显示白色圆点的正文列表加专属类，从根源上避免污染导航栏等其他组件。

注意：导航栏、按钮组等其他位置的<ul>/<li>不要加这个类，否则依然会出现多余圆点

HTML示例：

<!-- 仅给正文需要白色圆点的ul加这个类，导航栏的ul不要加 -->
<ul class="content-list">
  <li>第一个列表内容</li>
  <li>第二个列表内容</li>
  <li>第三个列表内容</li>
</ul>

第二步：替换为正确的CSS #

把你之前写的那段错误CSS全删掉，换成下面的代码：

/* 重置目标列表的默认样式 */
.content-list {
  list-style: none;
  padding-left: 20px; /* 给左侧圆点预留显示空间 */
}

/* 给列表项加相对定位，作为伪元素的定位基准 */
.content-list li {
  position: relative;
  padding-left: 14px; /* 控制圆点和文字的间距 */
}

/* 生成白色圆点 */
.content-list li::before {
  content: '\2022'; /* 圆形圆点，需要方形就替换为'\25A0' */
  position: absolute;
  left: 0;
  top: 0;
  color: #ffffff;
  font-size: 20px;
  line-height: inherit; /* 自动匹配正文行高，保证垂直对齐 */
}

快速微调技巧 #

• 如果圆点和文字垂直方向不对齐，微调top值即可，比如设为top: 2px可以把圆点往下挪2像素
• 如果圆点和文字距离太近/太远，修改.content-list li的padding-left数值
• 如果你不想给列表加类，也可以把选择器换成main ul、.article-content ul这类只选中正文区域的选择器，同样不会影响导航栏

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