移动web页面局部横向滑动

想实现一个类似手机京东App热搜的横向滑动，一开始走上了错误的道路，想要使用touchmove来完成滑动部分。结果越整越复杂，效果还不行，滑动后，两边都有空白不知道怎么消除。作为前端小白，一碰到这种问题就十分头疼。

后来重新整理了思路，参考了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;
}

移动web页面局部横向滑动

推荐阅读更多精彩内容