html+css实现移动端左右拖动标签

用的是一个keep顶端的左右拖动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maxi-mum-scale=1.0,user-scalable=no" name="viewport" />/*移动端自适应*/
		<title>左右拖动</title>
	</head>
	<body>
			<ul class="box">
				<li class="bq">课程与挑战</li>
				<li class="bq">健康轻食</li>
				<li class="bq">硬件商店</li>
				<li class="bq">Keepland</li>													
			</ul>				
	</body>
</html>

下面是css

.box{
	display: -webkit-box;
	overflow: auto;
	/*适应苹果*/
	 -webkit-overflow-scrolling:touch;
}
.bq{
	list-style: none;
	font-size: 22px;
	margin: 10px 30px 15px 10px;
}
/*隐藏滚动条     测试谷歌浏览器没有下面这一条也会自动隐藏*/
.box:-webkit-scrollbar{
	width: 10px;
	height: 1px;
}

发布了9 篇原创文章 · 获赞 0 · 访问量 940

猜你喜欢

转载自blog.csdn.net/black_strong/article/details/103001916