移動端微信h5下ul實現橫向滾動css代碼

在微信端實現商品分類的顯示，需要橫向顯示所有分類，超出寬度的分類需要能夠橫向滾動顯示。折騰許久，一直以爲只有使用js來實現這個功能，經過不斷的調試，發現只要通過css樣式調整就可以實現。由於對前端知識學習不多，所以調試很久才實現該功能。特此記錄，以備下次使用。

這是默認顯示，手指觸碰滑動的時候可以左右滑動。

並且 在微信端不會出現滾動條這根黑條。

具體實現代碼如下：

html代碼：

<ul class="flex-layout category-head" id="category-head" style="">
       <li class="flex" style="" id="brand_cat" searchtype="brand">品牌團</li>
       <li class="flex" style="" data-ic="1" searchtype="goods">美體個護</li>
       <li class="flex hover" style="" data-ic="4" searchtype="goods">食品保健</li>
       <li class="flex" style="" data-ic="7" searchtype="goods">嬰幼兒</li>
       <li class="flex" style="" data-ic="10" searchtype="goods">百貨</li>
       <li class="flex" style="" data-ic="13" searchtype="goods">數碼</li>
</ul>

css代碼：

#category-head{width:100%;display: inline;white-space: nowrap;overflow-x:scroll;float:left;overflow-y:hidden}
#category-head li{display:inline-block;width:80px;height:30px;padding-left:10px;}

關鍵點在於ul要設置float:left，overflow-x:scroll,overflow-y:hidden。