本文详解如何通过 css flexbox 正确构建左侧垂直排列的固定导航菜单，解决因缺少容器布局声明导致的水平堆叠问题，并提供可直接复用的样式与结构代码。
本文详解如何通过 css flexbox 正确构建左侧垂直排列的固定导航菜单，解决因缺少容器布局声明导致的水平堆叠问题，并提供可直接复用的样式与结构代码。
默认情况下，<ul> 元素以块级方式渲染，其子项 <li> 会垂直堆叠；但若目标是左侧垂直菜单（如图中左侧样式），需明确控制布局方向与空间分配。原代码中 .mobile-nav 虽设为 position: fixed 并占据全宽，但未对内部列表启用 Flex 布局，导致 .nav-item 仍按文档流垂直排列——这看似“符合预期”，实则与用户期望的图标+文字垂直居中、等宽分栏式侧边菜单不符。
关键修复在于为导航容器启用 Flex 布局并合理分配空间：
.mobile-nav {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 100vh; /* 替换原错误语法：(var(--vh, 1vh) * 100) → 应为 calc(100vh) 或直接 100vh */
background-color: var(--primary-container);
color: var(--on-background-variant);
padding-block: 12px 16px;
z-index: 4;
box-shadow: var(--shadow-1);
}
/* 启用水平主轴布局，使菜单项横向排列（适用于底部横栏）*/
/* 但若需「左侧垂直菜单」，应改为： */
.mobile-nav .navbar-list {
display: flex;
flex-direction: column; /* 垂直排列菜单项 */
height: 100%; /* 占满父容器高度 */
justify-content: center; /* 垂直居中（可选） */
gap: 8px; /* 项目间间距 */
}
.mobile-nav .navbar-list .nav-item {
width: 100%; /* 确保每项宽度撑满 */
}
.mobile-nav .navbar-list .nav-item .nav-link {
display: flex;
flex-direction: row; /* 图标在左，文字在右 */
align-items: center;
gap: 12px;
padding: 10px 16px;
border-radius: 8px;
text-decoration: none;
color: inherit;
transition: background-color 0.2s;
}
.mobile-nav .navbar-list .nav-item .nav-link:hover,
.mobile-nav .navbar-list .nav-item .nav-link[aria-current="true"] {
background-color: rgba(255, 255, 255, 0.1);
}⚠️ 注意事项：
- 原 CSS 中 height: (var(--vh, 1vh) * 100) 是无效语法，CSS 不支持算术运算符 * 直接使用；应改用 height: 100vh 或 height: calc(var(--vh, 1vh) * 100)（需确保 --vh 已正确定义）。
- 若目标为「左侧垂直菜单」，.mobile-nav 的 bottom: 0; left: 0; 需调整为 top: 0; left: 0; 并设置 width: 80px（窄栏）或 width: 240px（含文字），同时移除 width: 100%。
- Material Symbols 图标需引入 Google Fonts CDN 或本地字体文件，否则图标将不显示。
- 推荐为 .nav-link 添加 text-decoration: none 和 color: inherit，避免默认链接样式干扰设计。
最终效果：菜单纵向贴靠页面左侧，每个导航项包含图标与文字，水平对齐、等距分布，支持悬停反馈与当前页高亮。此方案兼顾语义化 HTML 结构与现代 CSS 布局能力，适用于桌面端侧边导航及移动端抽屉式菜单基础构建。
