本文介绍如何通过 css flexbox 让 `
- ` 中的 `
- ` 元素水平排列并**自动均分父容器宽度**，彻底解决传统 `inline-block` 方式导致的间隙、计算误差和响应式失效问题。
在构建水平导航栏时，开发者常试图用 display: inline-block 配合固定宽度（如 width: 100px）或手动计算（如 width: 20%）来均分
- ，但这种方式存在明显缺陷：
- inline-block 元素间因 HTML 换行/空格产生不可控间隙；
- 固定像素宽度无法随容器缩放，破坏响应式布局；
- 手动除法（如 70% / 5 = 14%）易受边框、内边距影响，实际渲染常留白或溢出；
- 默认 padding-left（通常 40px）进一步压缩可用空间。
✅ 推荐解法：Flexbox 布局
只需为- 设置 display: flex，并让每个
- 通过 flex: 1 占据相等剩余空间，即可实现精准、自适应、无间隙的等宽分布：
ul { padding: 0; /* 移除默认左内边距 */ width: 70%; /* 父容器宽度（可为任意值：px/%/vw） */ height: 50px; border: 1px solid #ccc; display: flex; /* 启用 Flex 布局 → 子项默认水平排列 */ } li { list-style: none; /* 移除默认圆点符号 */ border: 1px solid #999; flex: 1; /* 关键！等分可用空间（无需计算具体数值） */ /* 注意：无需设置 width，flex: 1 已接管尺寸分配 */ } li a { box-sizing: border-box; display: block; height: 100%; padding-top: 13px; text-align: center; border: 1px solid #666; }<ul> <li><a href="#">Click</a></li> <li><a href="#">Click</a></li> <li><a href="#">Click</a></li> <li><a href="#">Click</a></li> <li><a href="#">Click</a></li> </ul>
? 关键原理说明：
- flex: 1 是 flex-grow: 1 的简写，表示该元素将按比例放大以填满容器剩余空间；5 个
- 共享全部宽度，自然均分（各占 20%）；
- display: flex 自动消除 inline-block 的空白间隙，且不受 HTML 格式影响；
- 边框、内边距等样式会自动纳入 box-sizing: border-box 计算，避免宽度溢出；
- 若需微调（如首尾项留白），可用 flex: 0 0 auto + margin 组合，保持整体灵活性。
⚠️ 注意事项：
- 确保
- 无 padding-left（已通过 padding: 0 清除），否则会挤压内容区；
- 不要为
- 设置 width 或 max-width，否则会与 flex: 1 冲突；
- 如需垂直居中文字，可将 li a 的 padding-top 改为 display: flex; align-items: center; justify-content: center;，更健壮。
Flexbox 不仅解决了当前宽度适配问题，还为后续添加悬停效果、动画过渡、移动端折叠菜单等扩展功能提供了简洁可靠的底层结构。
