CSS+HTML實現移動端div左右滑動展現

　　因爲手機屏幕的寬度有限，內容太多移動設備一行裝不下的，因此不少移動端網站的導航欄都有左右滑動效果，下面我就用CSS+HTML實現移動端div左右滑動展現。

 

CSS：box設置文本不換行，子元素box1行內塊元素

.box{ background: #eee; padding: 10px 0; white-space: nowrap;/*文本不會換行，文本會在在同一行上繼續*/ overflow-y:auto;/*可滑動*/ } /*自定義滾動條的僞對象選擇器, CSS 能夠隱藏滾動條*/ .box::-webkit-scrollbar{ display: none; } .box1{ width: 49%; margin-left: 3%; height: 100px; background: #fff; display: inline-block;/*行內塊元素*/ }

 

HTML:

<div class="box"> <div class="box1"></div> <div class="box1"></div> <div class="box1"></div> <div class="box1"></div> <div class="box1"></div> </div>

 

運行效果

 

 

 注：.box::-webkit-scrollbar的兼用性較差，有些瀏覽器無效(如：IE等)，我建議在容器外面再嵌套一層 overflow:hidden 內部內容再限制尺寸和外部嵌套層同樣，就變相隱藏了。

 

 

修改後的CSS：

.div{ overflow: hidden; height: 118px; } .box{ background: #eee; padding: 10px 0; white-space: nowrap;/*文本不會換行，文本會在在同一行上繼續*/ overflow-y:auto;/*可滑動*/ } /*自定義滾動條的僞對象選擇器, CSS 能夠隱藏滾動條*/ /*.box::-webkit-scrollbar{ display: none; }*/ .box1{ width: 49%; margin-left: 3%; height: 100px; background: #fff; display: inline-block;/*行內塊元素*/ }

 

修改後的HTML:

<!--外部嵌套層--> <div class="div"> <div class="box"> <div class="box1"></div> <div class="box1"></div> <div class="box1"></div> <div class="box1"></div> <div class="box1"></div> </div> </div>

 

運行效果