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

html代码：

 <ul id="category">
     <li>品牌团</li>
     <li>美体个护</li>
     <li>食品保健</li>
     <li>婴幼儿</li>
     <li>百货</li>
     <li>数码</li>
  </ul>

css代码：

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

关键点在于ul要设置float: left, overflow-x: scroll, overflow-y: hidden。