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