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

王二红

已于 2023-04-10 18:37:07 修改

阅读量3.3w

点赞数 27

分类专栏： + CSS 文章标签： css css3 前端横向滚动 less/sass

于 2022-08-24 23:22:08 首次发布

本文链接：https://blog.csdn.net/weixin_44198965/article/details/126456914

版权

+ CSS 专栏收录该内容

63 篇文章

订阅专栏

本文介绍了如何轻松创建横向滚动效果，适用于PC和H5移动端。关键在于设置父元素宽度为100%，overflow-x为auto，white-space为nowrap，并将子元素设为inline-block。示例代码提供了一种实现方式，通过调整内容数量可以实现容器溢出，达到横向滚动的目的。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

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

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

在这里插入图片描述

解决方案

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

核心三要素：

父元素设置 width: 100%，横向滚动 overflow-x: scroll
父元素不换行 white-space: nowrap
子元素设置为行内块级元素 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;
}