水平菜单对齐项目定位

Question

this website 上的菜单不符合预期。

这可能是一个转贴，虽然我已经阅读了所有以前关于这个问题的解决方案......它现在正在打破我的大脑。

我目前正在使用这种 CSS 技术来调整菜单元素 :

<ul class="justified"><li>Element</li></ul>

CSS技巧（最后的技巧）给出了解释：

我一直在不同的网站上使用这个解决方案，现在我在 Wordpress 更新后遇到了这个问题。（我第一次在升级后遇到主题问题）。

感谢您的帮助，

更新 #1

根据 Pangloss 的回答，WordPress 正在生成 <li> 个元素而不用空格分隔它们。这是一个奇怪的行为...我通过手动添加缺少的空格解决了这个问题。

  $menu = wp_nav_menu($defaults);
  $menu = str_replace("</li><li", "</li> <li", $menu);

Answer 1

text-align:justify 定位技巧要求在标记中的子项之间有 白色 space（空白 space）。

在下面的例子中，它起作用了，因为 <li> 标签之间有白色的 spaces。

ul {
  text-align: justify;
  padding: 0;
}
li {
  display: inline-block;
}
ul:after {
  content: '';
  display: inline-block;
  width: 100%;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

但是在下面的例子中就不行了，因为它们之间没有白色的space，虽然CSS和上面的完全一样。您的 WordPress 生成的代码也存在同样的问题。

ul {
  text-align: justify;
  padding: 0;
}
li {
  display: inline-block;
}
ul:after {
  content: '';
  display: inline-block;
  width: 100%;
}

<ul><li>1</li><li>2</li><li>3</li></ul>

但是，还有其他方法，比如使用Modern CSS3 flexbox.

ul {
  display: flex;
  justify-content: space-between;
  list-style: none;
  padding: 0;
}

<ul><li>1</li><li>2</li><li>3</li></ul>

Horizontal menu justified positioning of items