如何*真正*证明HTML + CSS中的水平菜单？

  • Z时代
  • 2024-01-10
  • 分类：问答

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

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

  • 纯文本菜单项数量不一，页面布局也很流畅。

  • 第一个菜单项应左对齐，最后一个菜单项应右对齐。

  • 其余项目应在菜单栏上进行最佳分配。

  • 数字是变化的，因此没有机会预先计算出最佳宽度。

请注意，TABLE在这里也无法正常工作：

  • 如果将所有TD居中，则第一项和最后一项未正确对齐。

  • 如果左对齐，右对齐第一个。最后一项，间隔将不是最佳的。

没有明显的方法可以通过使用HTML和CSS干净地实现这一点，这很奇怪吗？

回答：

现代方法[-Flexbox](https://developer.mozilla.org/en-

US/docs/Web/Guide/CSS/Flexible_boxes)！

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

在这种情况下，您只需将父元素设置display为flex，然后将该justify-

content属性更改为space-between或space-

around，以便在子级flexbox项之间或周围添加空间。

- （

：

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>

-

：

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>

以上是 如何*真正*证明HTML + CSS中的水平菜单？ 的全部内容， 来源链接： utcz.com/qa/399653.html

回到顶部