如何将导航ul的li项均匀拉伸至容器宽度？

安全阿岳

2026-5-25

嘿，这个菜单拉伸的问题我之前也碰到过！想要让菜单项均匀填满容器宽度，其实有几种简单的CSS方案可以解决，我给你整理了最实用的几个：

方案1：用Flexbox（最推荐，现代浏览器友好）

Flexbox天生就是为这种均匀分布的布局设计的，改动很小就能实现效果：

/* 修改你的.mm-main-nav样式 */
.mm-main-nav {
  display: flex; /* 切换为flex布局 */
  width: 100%;
  font-family: 'Open Sans', sans-serif;
  font-size: 10px;
  font-weight: 400;
  /* 记得移除原来的inline-block、浮动这类会冲突的属性 */
}

/* 给菜单项添加flex平分规则 */
.mm-main-nav li {
  flex: 1; /* 让每个li自动平分可用宽度 */
  text-align: center; /* 文字居中，视觉效果更好 */
}

这样不管你有多少个菜单项，都会自动拉伸填满整个ul的宽度，而且响应式表现也很优秀。

方案2：用CSS Grid（灵活度拉满）

如果你的项目支持CSS Grid，这也是个很棒的选择，代码同样简洁：

.mm-main-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); /* 自动平分列宽 */
  width: 100%;
  font-family: 'Open Sans', sans-serif;
  font-size: 10px;
  font-weight: 400;
}

.mm-main-nav li {
  text-align: center;
}

repeat(auto-fit, minmax(0, 1fr))这个规则会让每个菜单项占据相等的宽度，自动适配菜单项的数量，非常灵活。

方案3：兼容旧浏览器的Table布局

如果需要兼容IE这类老浏览器，可以试试table布局的方式：

.mm-main-nav {
  display: table;
  width: 100%;
  font-family: 'Open Sans', sans-serif;
  font-size: 10px;
  font-weight: 400;
}

.mm-main-nav li {
  display: table-cell;
  text-align: center;
}

这种方法也能实现均匀拉伸，不过灵活性不如前两种现代方案。