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>

 

运行效果