1. 程式人生 > >div如何實現橫向滾動

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>