div如何實現橫向滾動
阿新 • • 發佈:2018-12-26
實現多個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>