我如何“真正地”调整HTML+CSS中的水平菜单？
你可以在HTML的菜单栏上找到大量的教程，但是对于这种特殊的情况(虽然我是通用的)，我还没有找到任何合适的解决方案：
# THE MENU ITEMS SHOULD BE JUSTIFIED JUST AS PLAIN TEXT WOULD BE #
# ^ ^ #- 仅文本菜单项的数量是不同的，并且页面布局是流畅的。
- 第一个菜单项应该左对齐，最后一个菜单项应该是左对齐的，其余菜单项应该在菜单栏上以最佳方式展开。
- 菜单项的数量是不同的，因此没有机会预先计算最佳宽度。
请注意，表在这里也不起作用：
如果你将所有的TD居中，第一项和最后一项不对齐，你会分别左对齐
- 和右对齐第一项。最后一项，间距将为sub-optimal.
没有明显的方法可以通过使用HTML和CSS以一种干净的方式实现这一点，这不是很奇怪吗？
回答 13
Stack Overflow用户
发布于 2015-03-22 05:51:16
现代方法- Flexboxes！
现在CSS3 flexboxes有了better browser support，我们中的一些人终于可以开始使用它们了。只需为more browser coverage添加额外的供应商前缀。
在本例中，您只需将父元素的display设置为flex，然后将justify-content property更改为space-between或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>
Stack Overflow用户
发布于 2010-03-15 06:49:00
最简单的做法是强制行中断，方法是在行尾插入一个元素，该元素占用的空间超过剩余可用空间，然后将其隐藏。我用一个简单的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的宽度，但我希望您能大致了解并适应它。
Stack Overflow用户
发布于 2012-03-05 07:30:39
好吧，这个解决方案在IE6/7上不起作用，因为缺乏对:before/:after的支持，但是：
ul {
text-align: justify;
list-style: none;
list-style-image: none;
margin: 0;
padding: 0;
}
ul:after {
content: "";
margin-left: 100%;
}
li {
display: inline;
}
a {
display: inline-block;
}<div id="menu">
<ul>
<li><a href="#">Menu item 1</a></li>
<li><a href="#">Menu item 2</a></li>
<li><a href="#">Menu item 3</a></li>
<li><a href="#">Menu item 4</a></li>
<li><a href="#">Menu item 5</a></li>
</ul>
</div>
我之所以将a标记作为inline-block，是因为我不希望里面的单词也是对齐的，我也不想使用不间断的空格。
https://stackoverflow.com/questions/49536
复制相似问题