手机端左右滑动,不用写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;
