div的overflow-x滚动失效，如何实现子元素不换行的横向滚动？

这个问题的核心是浮动元素的布局特性导致父容器的横向溢出没有被触发，我来给你拆解原因和解决办法：

为什么原来的代码不生效？ #

浮动元素本质是脱离文档流的，当父容器宽度（设为100%）不足以容纳所有浮动子元素时，它们会自动换行到下一行。而且父容器的宽度不会被浮动子元素撑开（父容器高度靠clear:both维持，但宽度依然保持100%），所以父容器并没有产生横向溢出，overflow-x:auto自然不会触发滚动效果。

解决方案1：使用Flexbox（推荐） #

Flexbox是现代布局的首选方案，语法简洁且兼容性好，能轻松实现横向滚动布局：

<div style="width:100%; overflow-x:auto; display:flex; gap:0;">
  <div style="width:50%; flex-shrink:0; background:#ccc;height:200px"></div>
  <div style="width:50%; flex-shrink:0; background:#333;height:200px"></div>
  <div style="width:50%; flex-shrink:0; background:#cc90fc;height:200px"></div>
  <div style="width:50%; flex-shrink:0; background:#000;height:200px"></div>
</div>

关键改动说明：

• 给父容器添加display:flex，让子元素横向排列
• 子元素添加flex-shrink:0，防止子元素被压缩（确保每个子元素保持设置的50%宽度）
• 移除了不必要的clear:both，Flexbox布局不需要这个属性

解决方案2：使用inline-block + white-space（兼容旧浏览器） #

如果需要兼容IE等旧浏览器，可以用这个方案：

<div style="width:100%; overflow-x:auto; white-space:nowrap; font-size:0;">
  <div style="width:50%; display:inline-block; background:#ccc;height:200px; font-size:16px;"></div>
  <div style="width:50%; display:inline-block; background:#333;height:200px; font-size:16px;"></div>
  <div style="width:50%; display:inline-block; background:#cc90fc;height:200px; font-size:16px;"></div>
  <div style="width:50%; display:inline-block; background:#000;height:200px; font-size:16px;"></div>
</div>

关键改动说明：

• 父容器添加white-space:nowrap，阻止行内块元素换行
• 父容器设置font-size:0，消除inline-block元素之间的默认间隙
• 子元素改成display:inline-block，并恢复font-size（避免影响子元素内的文本内容）
• 移除子元素的float属性

内容的提问来源于stack exchange，提问作者abhinab rout