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>

运行效果