手机端左右滑动,不用写js(只有页面切换到移动端可以看)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>Document</title>
<style>
* {
margin:0 auto;
padding:0;
}
::-webkit-scrollbar {
width:0;
height:0;
}
.div_div {
width:100%;
height:200px;
overflow: hidden;
overflow-x:auto;
white-space: nowrap;
background: pink;
}
.ul_ul {
width:2000%;
height:200px;
background: blue;
}
.li_li {
width:200px;
height:200px;
border:1px solid gray;
background: red;
list-style: none;
font-size: 30px;
text-align: center;
display:inline-block;
float:left;
}
</style>
</head>
<body>
<div class="div_div">
<ul class="ul_ul">
<li class="li_li">徐文龙1</li>
<li class="li_li">徐文龙2</li>
<li class="li_li">徐文龙3</li>
<li class="li_li">徐文龙4</li>
<li class="li_li">徐文龙5</li>
<li class="li_li">徐文龙6</li>
<li class="li_li">徐文龙7</li>
<li class="li_li">徐文龙8</li>
<li class="li_li">徐文龙9</li>
<li class="li_li">徐文龙10</li>
<li class="li_li">徐文龙11</li>
<li class="li_li">徐文龙12</li>
<li class="li_li">徐文龙13</li>
<li class="li_li">徐文龙14</li>
<li class="li_li">徐文龙15</li>
<li class="li_li">徐文龙16</li>
<li class="li_li">徐文龙17</li>
<li class="li_li">徐文龙18</li>
<li class="li_li">徐文龙19</li>
<li class="li_li">徐文龙20</li>
<li class="li_li">徐文龙21</li>
<li class="li_li">徐文龙22</li>
<li class="li_li">徐文龙23</li>
<li class="li_li">徐文龙24</li>
<li class="li_li">徐文龙25</li>
<li class="li_li">徐文龙26</li>
<li class="li_li">徐文龙27</li>
<li class="li_li">徐文龙28</li>
<li class="li_li">徐文龙29</li>
</ul>
</div>
</body>
</html>
这个是我写的一个小demo,页面处于移动端的时候,可以左右滑动.滚动条是一个伪元素,滚动条整体部分webkit-scrollbar 都设置为0,就看不到它的样式了, 在父级盒子设置 overflow: hidden; 子级盒子设置 overflow-x:auto;
white-space: nowrap;这两个属性实现了滚动效果. 当然li标签得设置的行内块级元素display:inline-block;
最新文章
- （一）Spark简介-Java&Python版Spark
- iOS 数字滚动 类似于老 - 虎- 机的效果
- 时间戳 JavaScript parse() 方法 处理技巧
- Sql server profiler抓出的语句不可信
- LeetCode 231 Power of Two
- 防止系统内存溢出触发OOM的一个内核参数
- 实现服务器端与客户端的高频实时通信 SignalR(2)
- MySQL server has gone away的解决方法
- Docker简介
- js数组的内部实现,迭代器,生成器和内包
- Flume连接Kafka的broker出错
- 一个TextView使用不同的颜色
- 程序猿的道路~~（How to be a programmer?）
- Qt4_VS10 程序打包发布
- JavaWeb总结(六)—Session
- Python入门之函数的装饰器
- Android开发学习之路--UI之初体验
- __x__(6)0905第二天__标签属性=“值”
- storm问题汇总
- BZOJ3697采药人的路径——点分治
热门文章
- Android中View窗口getWidth和getMeasuredWidth的差别
- 3 Angular 2 快速上手启动项目Demo
- Timus 1545. Hieroglyphs Trie的即学即用 实现字典提示功能
- 2016/05/11 Thinkphp 3.2.2 验证码 使用 及校验
- 2016/4/7 datatype：①json ②XML
- bean的scope属性
- rip是典型的距离矢量动态路由协议。Ospf是链路状态型的协议
- 什么是 XML Schema？
- POJ - 1986 Distance Queries（离线Tarjan算法）
- 并不对劲的bzoj3214:p3333:[ZJOI2013]丽洁体