700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > div如何实现横向滚动

div如何实现横向滚动

时间:2018-09-14 05:36:16

相关推荐

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>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。