我如何\*真正\*证明 HTML CSS 中的水平菜单合理？

Question

您可以在 HTML 中找到很多关于菜单栏的教程，但是对于这个特定的（尽管恕我直言是通用的）案例，我还没有找到任何合适的解决方案：

 #  THE MENU ITEMS    SHOULD BE    JUSTIFIED     JUST AS    PLAIN TEXT     WOULD BE  #
#  ^                                                                             ^  #

• 纯文本菜单项的数量各不相同，页面布局也很流畅。
• 第一个菜单项应该左对齐，最后一个菜单项应该右对齐。
• 其余项目应最佳地分布在菜单栏上。
• 数字是变化的，所以没有机会预先计算出最佳宽度。

请注意， TABLE 在这里也不起作用：

• 如果将所有 TD 居中，则第一项和最后一项不会正确对齐。
• 如果您左对齐和右对齐第一个响应。最后一项，间距将是次优的。

没有明显的方法通过使用 HTML 和 CSS 以干净的方式实现这一点，这难道不奇怪吗？

原文由 flight 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

现代方法 - Flexboxes ！

现在 CSS3 flexboxes 有了 更好的浏览器支持，我们中的一些人终于可以开始使用它们了。只需添加额外的供应商前缀 即可覆盖更多浏览器。

In this instance, you would just set the parent element’s display to flex and then change the justify-content property to either space-between or space-around 以便在子 flexbox 项目之间或周围添加空间。

使用 justify-content: space-between - （ 此处示例） ：

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

 <ul class="menu">
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three Longer</li>
    <li>Item Four</li>
</ul>

---

使用 justify-content: space-around - （此处示例） ：

 ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.menu {
    display: flex;
    justify-content: space-around;
}

 <ul class="menu">
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three Longer</li>
    <li>Item Four</li>
</ul>

原文由 Josh Crozier 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

最简单的做法是通过在行尾插入一个占用超过剩余可用空间的元素然后隐藏它来强制换行。我用一个简单的 span 元素很容易地完成了这个，如下所示：

 #menu {
  text-align: justify;
}

#menu * {
  display: inline;
}

#menu li {
  display: inline-block;
}

#menu span {
  display: inline-block;
  position: relative;
  width: 100%;
  height: 0;
}

 <div id="menu">
  <ul>
    <li><a href="#">Menu item 1</a></li>
    <li><a href="#">Menu item 3</a></li>
    <li><a href="#">Menu item 2</a></li>
  </ul>
  <span></span>
</div>

#menu span 选择器中的所有垃圾（据我所知）是取悦大多数浏览器所必需的。它应该强制 span 元素的宽度为 100%，这应该会导致换行，因为根据 display: inline-block 规则，它被认为是内联元素。 inline-block 也使得 span 可能像 width 这导致元素不符合菜单与菜单的行-休息。

您当然需要根据您的用例和设计调整 span 的宽度，但我希望您能了解总体思路并进行调整。

原文由 Asbjørn Ulsberg 发布，翻译遵循 CC BY-SA 3.0 许可协议