div如何实现横向滚动

实现多个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>

猜你喜欢

转载自blog.csdn.net/kerryqpw/article/details/85259605