版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Bright2017/article/details/82628867
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="flexible" content="initial-dpr=2" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>移动端滚动条左右滑动</title>
<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
<style type="text/css">
.All-cen {width: 94%;margin: 0 auto;overflow: hidden;}
.All-cen>div {padding-top: 0.931rem;margin: 0 auto;color: #3b3b3b;width: 100%;overflow-x: scroll;overflow-y: hidden;white-space: nowrap;}
.All-cen>div>div {display: inline-block;font-size: 0.378rem;margin-right: 0.9rem;height: 0.58rem;}
</style>
</head>
<body>
<div class="All-cen">
<div>
<div>全部</div>
<div>酒水</div>
<div>餐饮</div>
<div>全部</div>
<div>全部</div>
<div>酒水</div>
<div>餐饮</div>
<div>全部</div>
</div>
</div>
</body>
</html>
请打开谷歌控制台,模拟移动端
演示Demo:http://www.bright2017.top/test1/test1-23