<!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;