水平菜单对齐项目的定位答案

【问题标题】：Horizontal menu justified positioning of items水平菜单对齐项目的定位
【发布时间】：2016-04-08 10:59:22
【问题描述】：

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

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

我目前正在使用这种 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);

【问题讨论】：

附带说明，这是一种更简单的现代方法 - stackoverflow.com/a/29188477/2680216 在您的情况下，您似乎只需要删除伪元素并添加回未注释的行。跨度>
为什么不使用具有百分比宽度和text-align: center 的内联块呢？
感谢您的 cmets，不幸的是，我的客户端浏览器似乎不支持 Flex。这就是我使用“text-align:justify”定位技巧的原因。

【解决方案1】：

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%;
}

&lt;ul&gt;&lt;li&gt;1&lt;/li&gt;&lt;li&gt;2&lt;/li&gt;&lt;li&gt;3&lt;/li&gt;&lt;/ul&gt;

但是，还有其他方法，例如使用 Modern CSS3 flexbox。

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

&lt;ul&gt;&lt;li&gt;1&lt;/li&gt;&lt;li&gt;2&lt;/li&gt;&lt;li&gt;3&lt;/li&gt;&lt;/ul&gt;

【讨论】：

我仔细检查了代码并比较了 HTML 和 CSS 标记，但没有看到这个。谢谢潘格洛斯。我觉得奇怪的是，使用 wp_nav_menu 生成 Wordpress 菜单会删除 <li> 元素之间的空格。