如何使用 Flexbox 实现水平等宽导航列表（ul/li 自适应填充宽度）

本文介绍如何通过 css flexbox 让 `

` 中的 `
• ` 元素水平排列并**自动均分父容器宽度**，彻底解决传统 `inline-block` 方式导致的间隙、计算误差和响应式失效问题。

  在构建水平导航栏时，开发者常试图用 display: inline-block 配合固定宽度（如 width: 100px）或手动计算（如 width: 20%）来均分 <li>，但这种方式存在明显缺陷：

  • inline-block 元素间因 HTML 换行/空格产生不可控间隙；
  • 固定像素宽度无法随容器缩放，破坏响应式布局；
  • 手动除法（如 70% / 5 = 14%）易受边框、内边距影响，实际渲染常留白或溢出；
  • <ul> 默认 padding-left（通常 40px）进一步压缩可用空间。

  ✅ 推荐解法：Flexbox 布局
  只需为 <ul> 设置 display: flex，并让每个 <li> 通过 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 个 <li> 共享全部宽度，自然均分（各占 20%）；
  • display: flex 自动消除 inline-block 的空白间隙，且不受 HTML 格式影响；
  • 边框、内边距等样式会自动纳入 box-sizing: border-box 计算，避免宽度溢出；
  • 若需微调（如首尾项留白），可用 flex: 0 0 auto + margin 组合，保持整体灵活性。

  ⚠️ 注意事项：

  

  社研通

  文科研究生的学术加速器

  下载
  • 确保 <ul> 无 padding-left（已通过 padding: 0 清除），否则会挤压内容区；
  • 不要为 <li> 设置 width 或 max-width，否则会与 flex: 1 冲突；
  • 如需垂直居中文字，可将 li a 的 padding-top 改为 display: flex; align-items: center; justify-content: center;，更健壮。

  Flexbox 不仅解决了当前宽度适配问题，还为后续添加悬停效果、动画过渡、移动端折叠菜单等扩展功能提供了简洁可靠的底层结构。