如何通过css制作水平滚动列表_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

如何通过css制作水平滚动列表

2025-10-05

浏览次数：次

返回列表

答案：通过CSS设置容器overflow-x: auto和white-space: nowrap，结合flex布局使子元素横向排列，可实现水平滚动列表。具体步骤包括：1. 设置容器固定宽度并启用横向滚动；2. 使用display: flex让子项水平排列；3. 子项设置flex: 0 0 auto保持尺寸，可选scroll-snap-align实现滚动吸附。适用于图片轮播、标签栏等场景。

如何通过css制作水平滚动列表

要实现一个水平滚动列表，关键在于控制容器的溢出方式和内容的排列方向。通过 CSS 可以轻松实现这一效果，无需 J*aScript。下面是具体方法。

1. 设置容器为横向滚动

创建一个固定宽度的容器，并设置 overflow-x: auto，这样当内容超出容器宽度时会出现横向滚动条。

同时使用 white-space: nowrap 防止子元素换行。

.scroll-container {
  width: 100%;
  max-width: 600px;
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch; /* 在移动端更流畅 */
}

2. 让子元素水平排列

如果子项是内联元素（如 span、img），默认就会在一行显示。如果是块级元素（如 div），可以通过以下方式让它们横向排列：

使用 display: inline-block
或使用 display: flex 并设置主轴方向为 row

推荐使用 Flexbox 方式，布局更灵活：

UXbot

AI产品设计工具

185 查看详情 UXbot

.scroll-container {
  display: flex;
  overflow-x: auto;
  gap: 10px; /* 元素之间的间距 */
  padding: 10px;
  scroll-snap-type: x mandatory; /* 可选：增加滚动吸附效果 */
}

3. 子项样式设置

每个列表项可以设置固定或自适应宽度，并可添加滚动吸附点：

.scroll-item {
  flex: 0 0 auto; /* 不伸缩，保持自身宽度 */
  width: 180px;
  height: 100px;
  background: #eee;
  border-radius: 8px;
  padding: 10px;
  scroll-snap-align: start; /* 吸附到容器起点 */
}

其中 flex: 0 0 auto 表示不增长、不收缩、不拉伸，保持原始尺寸。

基本上就这些。只要容器允许横向滚动，内容强制在一行，就能实现水平滑动效果。适合用于图片轮播、标签栏、商品列表等场景。不复杂但容易忽略细节。

以上就是如何通过css制作水平滚动列表的详细内容，更多请关注其它相关文章！

# 就能 # 范湖品牌型网站建设 # 搜索引擎营销推广方式 # 汕尾网络营销和推广专员 # 如何优化网站隽拔易速达 # 本溪关键词排名如何引流 # 珠海搜索关键词排名品牌 # 旅游网站推广定位 # 网站标题 seo # 网站推广召忠云速捷高手 # 蝎子电影网站建设 # 相关文章 # 适用于 # 推荐使用 # css # 选择器 # 就会 # 这一 # 两种类型 # 中不 # 可选 # overflow # 排列 # flex布局 # ai # java # javascript