答案：通过CSS设置容器overflow-x: auto和white-space: nowrap，结合flex布局使子元素横向排列，可实现水平滚动列表。具体步骤包括：1. 设置容器固定宽度并启用横向滚动；2. 使用display: flex让子项水平排列；3. 子项设置flex: 0 0 auto保持尺寸，可选scroll-snap-align实现滚动吸附。适用于图片轮播、标签栏等场景。
要实现一个水平滚动列表，关键在于控制容器的溢出方式和内容的排列方向。通过 CSS 可以轻松实现这一效果，无需 JavaScript。下面是具体方法。
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），可以通过以下方式让它们横向排列：
立即学习“前端免费学习笔记（深入）”；
TextCortex
AI写作能手，在几秒钟内创建内容。
62 查看详情 使用 display: inline-block或使用 display: flex 并设置主轴方向为 row
推荐使用 Flexbox 方式，布局更灵活：
.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制作水平滚动列表的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1029426.html
微信扫一扫 
支付宝扫一扫 
