如何让水平排列的<li>元素完全填满<ul>的宽度？

原代码存在的错误 #

• 固定宽度适配失效：<li>设置了固定width:100px，但<ul>是70%的相对宽度，屏幕尺寸变化时，固定宽度的<li>无法填满<ul>宽度，必然出现右侧留白。
• inline-block自带空白间距：<li>用display:inline-block时，HTML里的换行、空格会被解析为空白字符，导致<li>之间产生额外间距，进一步挤占可用宽度，加剧留白问题。
• 盒模型未统一：仅<li a>设置了box-sizing:border-box，但<ul>和<li>未设置，border会额外增加元素总宽度，导致布局计算偏差。

最优解决方案：使用Flex布局 #

Flex布局天然支持等分空间分配，完美适配各种宽度场景，代码修改如下：

修改后的CSS代码 #

/* 可选：统一全局盒模型，避免border/padding影响宽度计算 */
* {
  box-sizing: border-box;
}

ul {
  padding: 0;
  width: 70%;
  height: 50px;
  border: 1px solid;
  /* 启用flex布局 */
  display: flex;
}

li {
  height: 100%;
  /* 让每个li等分ul的可用宽度 */
  flex: 1;
  border: 1px solid;
}

li a {
  padding-top: 13px;
  height: 100%;
  text-align: center;
  display: block;
  border: 1px solid;
}

方案说明 #

• display:flex：给<ul>设置flex布局，使其子元素自动成为flex项。
• flex:1：让每个<li>平分<ul>的可用宽度，无论<ul>是百分比还是固定宽度，都能完全适配，无留白。
• 全局box-sizing:border-box：让元素的border和padding包含在设置的宽高内，避免布局溢出。

备选方案（不推荐）：修复inline-block问题 #

若一定要用inline-block，可通过以下方式调整，但灵活性远不如flex：

* {
  box-sizing: border-box;
}

ul {
  padding: 0;
  width: 70%;
  height: 50px;
  border: 1px solid;
  font-size: 0; /* 消除inline-block的空白间距 */
}

li {
  height: 100%;
  width: 20%; /* 5个元素等分100%宽度 */
  display: inline-block;
  border: 1px solid;
  font-size: 16px; /* 恢复正常字体大小 */
}

内容的提问来源于stack exchange，提问作者Ale Chichinadze