本文探讨了在css多级菜单中，如何使列表项（li）根据其内容高度自适应并实现多列布局。针对传统flexbox布局在特定场景下的局限性，文章详细介绍了利用css `column-count` 属性和 `float` 属性，高效构建结构清晰、高度自适应且内容流动的菜单子项布局，确保元素在有限空间内合理排列。
在构建复杂的Web导航菜单，尤其是包含多级下拉菜单时，一个常见的挑战是如何优雅地处理子菜单项（li元素）的布局。当子菜单包含大量子项且这些子项的内容高度不一致时，我们往往希望它们能够自动适应父容器的高度，并以多列形式呈现，以充分利用空间并提升用户体验。传统的布局方法，如简单的display: block或display: inline-block，以及在某些情况下使用的Flexbox布局，可能无法直接满足这种“高度自适应的多列报纸式布局”需求。
考虑一个典型的多级菜单场景，其中有一个主菜单项触发一个大型下拉面板，该面板内部包含多组子类别。这些子类别（例如，ul-level-2下的li-level-2）需要以多列形式展示，并且每列的高度应根据其内容自动调整。
原始的CSS尝试可能如下所示，对子菜单容器使用display: flex和flex-wrap: wrap：
#header .ul-level-1 .li-level-1 .ul-level-2 {
/* ...其他样式... */
display: flex; /* 尝试使用Flexbox */
flex-wrap: wrap; /* 允许换行 */
}
#header .ul-level-1 .li-level-1 .ul-level-2 .li-level-2 {
/* ...其他样式... */
width: 265px;
display: inline-block; /* 或许是遗留样式 */
position: relative;
}这种方法虽然能让子项换行，但其默认行为是水平填充一行，然后换到下一行。当li-level-2元素的高度不一致时，flex-wrap通常不会创建出整齐的“报纸式”多列布局，即内容先垂直填充一列，再填充下一列。它更倾向于保持每行的基线对齐，导致列高不一，且可能在视觉上留下不均匀的垂直空白，影响美观和可读性。此外，如果父容器（如.dropdown-menu）设置了固定的height，内部的Flexbox布局可能无法充分利用或适应这个高度。
立即学习“前端免费学习笔记（深入）”；
针对上述问题，CSS的Multi-column Layout模块提供了一个更简洁、更语义化的解决方案，尤其适用于文本或块级元素的多列排列。核心思想是利用column-count属性将父容器的内容自动分割成指定数量的列，并结合float属性确保子元素在列内正确排列。
column-count 属性：
float: left 属性：
我们将通过修改目标子菜单容器及其子项的CSS，来实现高度自适应的多列布局。
HTML结构示例（简化并聚焦相关部分）：
<header id="header">
<nav class="navbar">
<div class="collapse navbar-collapse navbar-responsive-collapse-mainMenu">
<ul class="nav navbar-nav nav-menu nav-menu-header">
<li class="dropdown open">
<a data-toggle="dropdown" class="dropdown-toggle">
Les produits <b class="caret"></b>
</a>
<!-- 一级子菜单容器 -->
<ul class="dropdown-menu ul-level-1">
<li class="li-level-1">
<a target="_self">offre du moment</a>
<!-- 二级子菜单容器，需要多列布局 -->
<ul class="dropdown-sub-menu list-unstyled ul-level-2">
<li class="li-level-2">
<a target="_self">First Category</a>
<ul class="dropdown-sub-menu list-unstyled ul-level-3">
<li class="li-level-3"><a target="_self">first sub-element</a></li>
<li class="li-level-3"><a target="_self">second sub-element</a></li>
</ul>
</li>
<li class="li-level-2">
<a target="_self">Second Category</a>
<ul class="dropdown-sub-menu list-unstyled ul-level-3">
<li class="li-level-3"><a target="_self">Blanc, typex et correcteurs</a></li>
<li class="li-level-3"><a target="_self">stylos à plumes</a></li>
<li class="li-level-3"><a target="_self">stylos billes</a></li>
<li class="li-level-3"><a target="_self">stylos billes</a></li>
<li class="li-level-3"><a target="_self">stylos billes</a></li>
<li class="li-level-3"><a target="_self">stylos billes</a></li>
</ul>
</li>
<li class="li-level-2">
<a target="_self">Third Category</a>
<ul class="dropdown-sub-menu list-unstyled ul-level-3">
<li class="li-level-3"><a target="_self">Ciseaux, équerres, compas</a></li>
</ul>
</li>
<li class="li-level-2">
<a target="_self">Fourth Category</a>
</li>
<li class="li-level-2">
<a target="_self">Fifth Category</a>
<ul class="dropdown-sub-menu list-unstyled ul-level-3">
<li class="li-level-3"><a target="_self">Blanc, typex et correcteurs</a></li>
<li class="li-level-3"><a target="_self">stylos à plumes</a></li>
<li class="li-level-3"><a target="_self">stylos billes</a></li>
<li class="li-level-3"><a target="_self">stylos billes</a></li>
<li class="li-level-3"><a target="_self">stylos billes</a></li>
<li class="li-level-3"><a target="_self">stylos billes</a></li>
</ul>
</li>
<li class="li-level-2">
<a target="_self">Sixth Category</a>
<ul class="dropdown-sub-menu list-unstyled ul-level-3">
<li class="li-level-3"><a target="_self">Blanc, typex et correcteurs</a></li>
<li class="li-level-3"><a target="_self">stylos à plumes</a></li>
<li class="li-level-3"><a target="_self">stylos à plumes</a></li>
<li class="li-level-3"><a target="_self">stylos billes</a></li>
<li class="li-level-3"><a target="_self">stylos billes</a></li>
<li class="li-level-3"><a target="_self">stylos billes</a></li>
<li class="li-level-3"><a target="_self">stylos billes</a></li>
<li class="li-level-3"><a target="_self">stylos billes</a></li>
</ul>
</li>
<li class="li-level-2">
<a target="_self">Seventh Category</a>
<ul class="dropdown-sub-menu list-unstyled ul-level-3">
<li class="li-level-3"><a target="_self">Blanc, typex et correcteurs</a></li>
<li class="li-level-3"><a target="_self">stylos à plumes</a></li>
<li class="li-level-3"><a target="_self">stylos billes</a></li>
<li class="li-level-3"><a target="_self">stylos à plumes</a></li>
<li class="li-level-3"><a target="_self">stylos à plumes</a></li>
<li class="li-level-3"><a target="_self">stylos billes</a></li>
<li class="li-level-3"><a target="_self">stylos billes</a></li>
</ul>
</li>
</ul>
</li>
<!-- 更多 li-level-1 -->
</ul>
</li>
</ul>
</div>
</nav>
</header>**CSS样式（修正
以上就是CSS多级菜单中LI元素高度自适应与多列布局实践的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
617
收藏
