移动端出现水平滚动条的原因排查与解决求助

针对导航栏的排查与修复 #

• 检查导航项的外边距：如果导航按钮/链接用了左右margin，小屏时间距叠加容易撑爆容器，换成padding或者flex布局的gap控制间距更稳妥。
• 清理固定宽度元素：导航栏里若有硬设width的元素（比如logo、按钮），改成max-width或者直接删除固定值，让元素随容器自适应。
• 调整flex收缩属性：如果导航用了flex布局，检查是否有元素加了flex-shrink: 0，这类元素不会自动收缩，必要时改成flex-shrink: 1。
• 启用盒模型优化：给所有元素设置box-sizing: border-box，避免padding、border额外撑开宽度，代码如下：

* {
  box-sizing: border-box;
}

通用排查技巧 #

1. 用浏览器F12开发者工具，选中导航栏容器，查看子元素的宽度高亮区域，定位实际溢出的元素。
2. 可临时给body加overflow-x: hidden应急，但务必找到根源问题，不要只靠这个掩盖问题。

内容的提问来源于stack exchange，提问作者Pradeep Singh