移动端微信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。