您可以在 HTML 中找到很多关于菜单栏的教程,但是对于这个特定的(尽管恕我直言,通用的)案例,我还没有找到任何合适的解决方案:
# THE MENU ITEMS SHOULD BE JUSTIFIED JUST AS PLAIN TEXT WOULD BE #
# ^ ^ #
- 纯文本菜单项的数量各不相同,页面布局流畅。
- 第一个菜单项应左对齐,最后一个菜单项应右对齐。
- 其余元素应以最佳方式分布在菜单栏上。
- 数字是变化的,所以没有机会预先计算出最佳宽度。
请注意,TABLE 在这里也不起作用:
- 如果您将所有 TD 居中,则第一个和最后一个元素不会正确对齐。
- 如果您左对齐和右对齐第一个响应。最后一项,间距将是次优的。
没有明显的方法可以使用 HTML 和 CSS 以干净的方式实现这一点,这难道不奇怪吗?
最佳答案
最简单的做法是强制换行,方法是在行尾插入一个元素,该元素占用的空间超过剩余可用空间,然后将其隐藏。我已经用一个简单的 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
的宽度,但我希望您能了解总体思路并进行调整。
关于html - 我如何*真正*证明 HTML+CSS 中的水平菜单合理?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31574651/