码迷,mamicode.com
首页 > 移动开发 > 详细

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

时间:2018-04-28 17:59:20      阅读:247      评论:0      收藏:0      [点我收藏+]

标签:hid   add   isp   设置   code   style   移动端   品牌   category   

html代码:

1 <ul id="category">
2     <li>品牌团</li>
3     <li>美体个护</li>
4     <li>食品保健</li>
5     <li>婴幼儿</li>
6     <li>百货</li>
7     <li>数码</li>
8  </ul>

css代码:

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

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

 

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

标签:hid   add   isp   设置   code   style   移动端   品牌   category   

原文地址:https://www.cnblogs.com/e-cat/p/8968816.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!