css - 水平菜单对齐项目的定位

Question

本网站上的菜单不符合预期。

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

我目前正在使用这种 CSS 技术来证明菜单的元素：

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

CSS Tricks（最后一种技术）给出了解释：

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

谢谢您的帮助，

更新#1

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

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

score 0 · Accepted Answer

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

<li>在下面的示例中，它可以工作，因为标签之间有空格。

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>

但是，它在下面的示例中不起作用，因为它们之间没有空格，尽管 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>

1 回答 1