CSS+HTML实现移动端div左右滑动展示
//由于手机屏幕的宽度有限,内容太多移动导致不能放在一行,所以很多移动端网站的导航栏都有左右滑动效果
<!--外部嵌套层-->
<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>
.div{
overflow: hidden;
height: 118px;
}
.box{
background: #eee;
padding: 10px 0;
white-space: nowrap;/*文本不会换行,文本会在在同一行上继续*/
overflow-y:auto;/*可滑动*/
}
/*自定义滚动条的伪对象选择器, CSS 可以隐藏滚动条*/
/*.box::-webkit-scrollbar{
display: none;
}*/
//注:.box::-webkit-scrollbar的兼用性较差,有些浏览器无效(如:IE等)。
.box1{
width: 49%;
margin-left: 3%;
height: 100px;
background: #fff;
display: inline-block;/*行内块元素*/
}