想實現(xiàn)一個類似手機(jī)京東App熱搜的橫向滑動丑掺，一開始走上了錯誤的道路，想要使用touchmove來完成滑動部分述雾。結(jié)果越整越復(fù)雜街州，效果還不行，滑動后玻孟，兩邊都有空白不知道怎么消除唆缴。作為前端小白，一碰到這種問題就十分頭疼黍翎。
后來重新整理了思路琐谤，參考了CSS ul 橫向滑動并超出屏幕可滑動，直接用CSS就能完成了玩敏，很感謝斗忌。
其實按照我的原始需求，并不需要能滑動旺聚，只要平鋪排列出來就可以了织阳。所以把兩種都放這兒吧
<html lang="cn" class="ui-mobile">
<head>
<title>最近搜索</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
<meta name="version" content="1">
</head>
<style>
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, table, th, td {margin:0; padding:0;}
ul{
list-style: none;
}
.recent-search-tags {
padding-right: 2px;
overflow: hidden;
font-size: .85rem;
text-align: center;
margin-left: 15px;
}
.recent-search-tags span {
display: block;
max-width: 100%;
overflow: hidden;
padding-right: 10px;
padding-bottom: 10px;
float: left;
margin-right: 12px;
}
.recent-search-tags a {
height: 1.4375rem;
line-height: 1.5rem;
border-radius: 3px;
display: block;
width: 100%;
color: #686868;
white-space: nowrap;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
background-color: #f0f2f5;
padding-left: 4px;
padding-right: 4px;
overflow: hidden;
}
.recent-search-tag {
display: block;
overflow: hidden;
white-space: nowrap;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
}
#resent-search3 {
margin-left: 15px;
overflow-x: auto;
white-space:nowrap;
width: auto;
}
::-webkit-scrollbar {
display: none;
}
.resent-search-tag3 {
display: inline-block;
font-size: 10pt;
border-radius: 3px;
background-color: #f0f2f5;
color: #686868;
padding: 2px 10px;
margin-right: 10px;
}
</style>
<body>
<div id="resent-search-view2" style="margin-bottom: 30px;">
<div style="margin-bottom: 20px;">最近搜索2</div>
<div class="recent-search-tags">
<span><a href="javascript:void(0);"><i class="recent-search-tag">6500S</i></a></span>
<span><a href="javascript:void(0);"><i class="recent-search-tag">SM-</i></a></span>
<span><a href="javascript:void(0);"><i class="recent-search-tag">X26</i></a></span>
<span><a href="javascript:void(0);"><i class="recent-search-tag">惠普</i></a></span>
<span><a href="javascript:void(0);"><i class="recent-search-tag">CS201</i></a></span>
<span><a href="javascript:void(0);"><i class="recent-search-tag">BP8904</i></a></span>
<span><a href="javascript:void(0);"><i class="recent-search-tag">101</i></a></span>
<span><a href="javascript:void(0);"><i class="recent-search-tag">fi-61</i></a></span>
<span><a href="javascript:void(0);"><i class="recent-search-tag">愛心之光</i></a></span>
</div>
</div>
<div id="resent-search-view3">
<div style="margin-bottom: 20px;">最近搜索3</div>
<ul id="resent-search3">
<li class="resent-search-tag3"><i>6500S</i></li>
<li class="resent-search-tag3"><i>SM-</i></li>
<li class="resent-search-tag3"><i>X26</i></li>
<li class="resent-search-tag3"><i>CS201</i></li>
<li class="resent-search-tag3"><i>BP8904</i></li>
<li class="resent-search-tag3"><i>101</i></li>
<li class="resent-search-tag3"><i>fi-61</i></li>
<li class="resent-search-tag3"><i>MT990</i></li>
<li class="resent-search-tag3"><i>惠普</i></li>
<li class="resent-search-tag3"><i>CDD8766</i></li>
<li class="resent-search-tag3"><i>南天</i></li>
</ul>
</div>
</body>
</html>
效果：
捕獲.PNG
其中“最近搜索3”可以橫向滑動（滾動）
注意：
::-webkit-scrollbar {
display: none;
}
用于在iOS設(shè)備上去掉橫向滾動條（安卓沒有這個樣式也沒有橫向滾動條）
