移动端微信h5下ul实现横向滚动css代码

在微信端实现商品分类的显示，需要横向显示所有分类，超出宽度的分类需要能够横向滚动显示。折腾许久，一直以为只有使用js来实现这个功能，经过不断的调试，发现只要通过css样式调整就可以实现。由于对前端知识学习不多，所以调试很久才实现该功能。特此记录，以备下次使用。

这是默认显示，手指触碰滑动的时候可以左右滑动。

并且 在微信端不会出现滚动条这根黑条。

具体实现代码如下：

html代码：

       
• 品牌团

       
• 美体个护

       
• 食品保健

       
• 婴幼儿

       
• 百货

       
• 数码

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。