li 水平排列并自动填满 ul

找了li 如何水平排列并自动填满 ul，同时 li 宽度平均？资料，里面有提到"请用js动态计算保证兼容性"，

因为我想实现的是，水平滚动条，ul的上级div是固定的宽度1000px, 我就想到用jquery 获取每个li的高度，ul的宽度等于每个li的宽度.

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head >
 4     <title>index.html</title>
 5     <meta name="description" content="Hello world">
 6 
 7     <!-- jQuery 1.7.2+ or Zepto.js 1.0+ -->
 8     <script src="http://ajax.useso.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 9 
10     <style type="text/css">
11         #category{
12             width:1000px;
13             height:54px;
14             border:1px solid red;
15             overflow-x:auto;
16             overflow-y:hidden;
17         }
18         #category ul{
19             margin:0px;
20             padding:0px;
21             list-style:none;
22             /**float:left;和overflow:hidden;是为了让ul的宽度为实际宽度,具体的区别，我还待学习**/
23             overflow:hidden;
24         }
25         #category ul li{
26             float:left;
27             margin:0px 10px;
28             padding:10px;
29             border:red;
30         }
31         
32     </style>
33     
34 </head>
35 <body>
36     <div id="category">
37         <ul>
38             <li>Test</li>
39             <li>Test12321321</li>
40             <li>Test111</li>
41             <li>Test11</li>
42             <li>Test</li>
43             <li>Test</li>
44             <li>Test</li>
45             <li>Test</li>
46             <li>Test</li>
47             <li>Test</li>
48             <li>Test</li>
49             <li>Test</li>
50             <li>Test</li>
51             <li>Test</li>
52         </ul>
53     </div>
54     <script type="text/javascript">
55         jQuery(function($){
56             var ul_width = 0 ;
57             $("#category ul li").each(function(index,value){
58                 var width = $(value).width();
59                 //40是padding-left + padding-right + margin-left + margin-left
60                 ul_width += (width + 40);
61                 //console.log(width);
62             });
63             $("#category ul").width(ul_width);
64         });
65     
66     </script>
67 </body>
68 </html>
View Code

最终的效果图是:

 

posted @ 2015-12-01 11:39  五毛钱的饼  阅读(2213)  评论(0)  编辑  收藏  举报