CSS - 实现横向滚动（横向滚动布局）

前言

横向滚动需求很常见，实现起来也很容易。

如下图所示，PC 端是用鼠标拖动滚动条，H5 移动端是手指滑动：

解决方案

上述效果图的完整代码如下，一键复制运行起来即可。

核心三要素：

1. 父元素设置 width: 100%，横向滚动 overflow-x: scroll
2. 父元素不换行 white-space: nowrap
3. 子元素设置为行内块级元素 display: inline-block

<section class="content">
  <div class="item">充数内容</div>
  <div class="item">充数内容</div>
  <!-- 自行复制上面的充数内容(让容器溢出即可) -->
</section>

.content {
  background: rgb(196, 196, 196);
  width: 100%;
  overflow: hidden;
  overflow-x: auto;
  white-space: nowrap;
}
.item {
  display: inline-block;
  background: #fff;
  margin: 10px;
  width: 100px;
  height: 100px;
}