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>
css去掉滚动条<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div> </div>
</div>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。