CSS布局疑难：如何实现子元素保持单行且父容器横向滚动？

我来帮你搞定这个问题！你遇到的核心问题是：默认情况下，float或者inline-block元素在父容器宽度不足时会自动换行，我们需要让子元素强制保持在同一行，同时父容器支持横向滚动。另外先提个小细节：你的HTML里class-"parent"是笔误，应该写成class="parent"，不然父容器的样式根本不会生效哦！

下面给你两种靠谱的解决方案：

方案一：使用Flex布局（推荐，现代浏览器都支持） #

Flex布局是处理这类横向排列需求最简洁的方式，直接让父容器变成flex容器，子元素就会默认横向排列，不会自动换行：

修正后的CSS代码 #

.container { 
  padding: 16px 24px; 
  width: 100%; 
}
.parent { 
  padding: 24px 24px 16px 24px; 
  overflow-y: hidden; 
  overflow-x: scroll; 
  width: 100%; 
  display: flex; /* 关键：启用flex布局 */
  gap: 24px; /* 用gap代替子元素的margin-right，更易维护 */
}
.child { 
  box-shadow: 0 0 10px 0 rgba(0,0,0,0.10); 
  background-color: grey; 
  border-radius: 4px; 
  height: 255px; 
  width: 175px; 
  padding: 0; 
  /* 去掉float: left; 因为flex会自动排列子元素 */
}

修正后的HTML代码 #

<div class="container">
  <div class="parent"> <!-- 这里修正了class的写法 -->
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>

方案二：使用inline-block + white-space: nowrap #

如果你因为某些原因不想用flex，可以用这个传统方法，核心是让父容器禁止换行，同时子元素用inline-block排列：

修正后的CSS代码 #

.container { 
  padding: 16px 24px; 
  width: 100%; 
}
.parent { 
  padding: 24px 24px 16px 24px; 
  overflow-y: hidden; 
  overflow-x: scroll; 
  width: 100%; 
  white-space: nowrap; /* 关键：禁止容器内的内容换行 */
  font-size: 0; /* 消除inline-block元素之间的空白间隙，可选 */
}
.child { 
  box-shadow: 0 0 10px 0 rgba(0,0,0,0.10); 
  background-color: grey; 
  margin-right: 24px; 
  border-radius: 4px; 
  height: 255px; 
  width: 175px; 
  padding: 0; 
  float: none; /* 去掉原来的float */
  display: inline-block; 
  vertical-align: top; /* 让所有子元素顶部对齐 */
  font-size: 16px; /* 恢复字体大小，抵消父容器的font-size:0 */
}

这两种方案都能实现你要的效果：子元素始终在同一行，父容器宽度不足时触发横向滚动。推荐用Flex布局，代码更简洁，也更容易维护。

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