WordPress网站页脚导航项与分隔点间距不均问题求助

嗨，我仔细看了你的代码，很快定位到了问题的核心：当前的CSS布局把分隔圆点放在了li元素内部，同时给li设置了左右外边距，导致导航项和圆点之间的间距叠加，视觉上出现了不均的情况。

问题根源 #

你的现有CSS存在两个关键的叠加问题：

• .footer ul li 设置了 margin: 0 5px;，每个导航项左右都带有5px的外边距
• li + li::before 给后续导航项添加圆点分隔符时，额外加了 margin-right: 5px

这就导致第一个导航项到第二个导航项的总间距是：第一个li的右外边距(5px) + 第二个li的左外边距(5px) + 圆点宽度 + 圆点的右外边距(5px)，而圆点和第二个导航项文本之间只有5px间距，和第一个导航项文本之间却有10px+圆点宽度的间距，视觉上自然显得不均匀。

修复方案 #

我们调整CSS逻辑，让分隔圆点的左右间距保持一致，同时避免外边距叠加。修改后的页脚相关CSS如下：

/* footer */
.footer {
  background-color: #202b59;
  padding-top: 41px;
  padding-bottom: 36px;
}
.footer__logo {
  margin-bottom: 51px;
}
.footer p {
  font-size: 14px;
  color: #fff;
  margin-bottom: 7px;
}
.footer ul {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}
.footer ul li {
  font-size: 14px;
  color: #fff;
  margin: 0; /* 移除原来的左右外边距，避免间距叠加 */
}
.footer ul li + li::before {
  content: '\f111';
  font-family: 'Font Awesome 5 Pro';
  font-weight: 900;
  font-size: 3px;
  color: #0ba3b3;
  vertical-align: middle;
  display: inline-block;
  margin: 0 8px; /* 给圆点左右设置相等的间距，保证均匀 */
  margin-top: -1px; /* 保留垂直对齐的微调，确保和文本居中 */
}
.footer ul li a {
  color: #fff;
}

调整说明 #

1. 移除.footer ul li的左右外边距，彻底避免和圆点的间距叠加问题
2. 将圆点的margin-right:5px改为margin:0 8px，让圆点和两边的导航项文本都保持相等的间距，视觉上完全均匀
3. 保留了margin-top:-1px的垂直对齐微调，确保圆点和导航文本完美居中对齐

小提示 #

你的手动添加的Home链接里有个拼写错误：traget= 应该修正为 target="_blank"（如果需要在新窗口打开链接的话），不影响功能但建议修正以保证代码规范。

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