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

Question

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

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

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

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

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

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

Answer 1

最简单的做法是强制换行，方法是在行尾插入一个元素，该元素占用的空间超过剩余可用空间，然后将其隐藏。我已经用一个简单的 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 成为可能的 block 级样式规则，例如 width，这会导致元素与菜单不匹配，并且因此菜单要换行。

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