div如何实现横向滚动

最新推荐文章于 2025-05-16 16:56:09 发布

原创最新推荐文章于 2025-05-16 16:56:09 发布 · 3.5w 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#横向滚动

web移动端专栏收录该内容

67 篇文章

订阅专栏

本文介绍了一种使用white-space和display属性使多个div在容器中横向排列的方法，通过设置white-space:nowrap防止换行，display: inline-block使元素并排显示。

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

实现多个div在容器内横向排列，
利用white-space这个属性防止父容器内容换行，
同时将容器内元素设置为行内块 display：inline-block来实现。

实现代码：

<div style="width: 100%;margin-top: 10px;margin-bottom: 30px;
							white-space: nowrap;overflow-x: auto;-webkit-overflow-scrolling:touch;">
							
							<span @click="clickcolumnClass($event)" class="columnClass active" >招商引资</span>
							<span @click="clickcolumnClass($event)" class="columnClass">优惠政策</span>
							<span @click="clickcolumnClass($event)" class="columnClass">优质资源</span>
							<span @click="clickcolumnClass($event)" class="columnClass">对外宣传</span>
							<span @click="clickcolumnClass($event)" class="columnClass">工作动态</span>
							<span @click="clickcolumnClass($event)" class="columnClass">大会新闻</span>
							<span @click="clickcolumnClass($event)" class="columnClass">重大活动</span>

						</div>