为什么用百分比布局时子元素宽度总是超出父容器？

慕容妍妍提问于 2026-02-04 10:22:39 阅读 75

移动

大家好，我在做移动端导航栏时遇到问题。父容器设了width: 100%，里面三个子元素各占33.33%宽度，但实际显示时第三个元素会挤到下一行去。

我已经试过给父容器加font-size: 0解决子元素间距问题，也尝试过把百分比改成calc(33% - 2px)，但有时候页面缩放后还是会错位。有没有什么稳定的方法让三个元素平分父容器宽度？

代码大概是这样的：


.parent {
  width: 100%;
  white-space: nowrap;
  font-size: 0;
}
.child {
  display: inline-block;
  width: 33.33%;
  vertical-align: top;
  font-size: 14px;
}

在iPhone XR上测试时，第三个子元素总是被挤到下面，用浏览器开发者工具测量发现总宽度超过了父容器…

响应式布局百分比布局移动端开发

我来解答赞 12 收藏

反馈

2 条解答

Mr-春晖 Lv1

问题在 inline-block + 百分比 + 小数精度上。三个 33.33% 加起来是 99.99%，但浏览器渲染时会四舍五入，加上子元素间的空格/换行符实际占位，就超了。

直接用 flex 布局：

.parent {

  display: flex;

}

.child {

  flex: 1;

}

别折腾百分比和 font-size: 0 了，flex 才是正解。

2026-02-24 09:02

司空锦锦 Lv1

问题在于 inline-block 元素受 HTML 空白字符影响，默认会留出间距。用 flex 布局更稳定：

.parent {

  display: flex;

  width: 100%;

}

.child {

  flex: 0 0 33.33%;

  width: 33.33%;

}

2026-02-04 10:38