由于手机屏幕的宽度有限,内容太多移动导致不能放在一行,所以很多移动端网站的导航栏都有左右滑动效果,下面我就用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;/*行内块元素*/ }