您的位置：首页 > 移动开发

移动端html+css实现水平任意滚动（PC端也同理）

2017-07-06 21:16 555 查看

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" name="viewport"/>
<meta content="telephone=no" name="format-detection"/>
<title></title>
<style type="text/css" media="screen">
*{
margin: 0;
padding: 0;
}
.wrap_ul{
font-size: 0;
list-style: none;
width: 100px;
height: 120px;
}
.wrap_ul li{
font-size: 20px;
height: 40px;
line-height: 40px;
border: 1px solid #f2f2f2;
box-sizing: border-box;
text-align: center;
}
.wrap{
//这里有些css属性并不是必须的
display: -webkit-box;
white-space: nowrap;
overflow: hidden;
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
-webkit-overflow-scrolling: touch;
text-align: justify;
overflow-x: initial;
}
</style>
</head>
<body>
<div class="wrap">
<ul class="wrap_ul">
<li>a1</li>
<li>a2</li>
<li>a3</li>
</ul>
<ul class="wrap_ul">
<li>b1</li>
<li>b2</li>
<li>b3</li>
</ul>
<ul class="wrap_ul">
<li>c1</li>
<li>c2</li>
<li>c3</li>
</ul>
<ul class="wrap_ul">
<li>d1</li>
<li>d2</li>
<li>d3</li>
</ul>
<ul class="wrap_ul">
<li>e1</li>
<li>e2</li>
<li>e3</li>
</ul>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html css

相关文章推荐

新的分享

章节导航