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>

 

運行效果