滚动条左右滑动

版权声明:本文为博主原创文章,未经博主允许不得转载。 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

猜你喜欢

转载自blog.csdn.net/Bright2017/article/details/82628867
今日推荐