li 水平排列并自动填满 ul

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

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

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head >
     <title>index.html</title>
     <meta name="description" content="Hello world">

     <!-- jQuery 1.7.2+ or Zepto.js 1.0+ -->
     <script src="http://ajax.useso.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

     <style type="text/css">
         #category{
             width:1000px;
             height:54px;
             border:1px solid red;
             overflow-x:auto;
             overflow-y:hidden;
         }
         #category ul{
             margin:0px;
             padding:0px;
             list-style:none;
             /**float:left;和overflow:hidden;是为了让ul的宽度为实际宽度,具体的区别，我还待学习**/
             overflow:hidden;
         }
         #category ul li{
             float:left;
             margin:0px 10px;
             padding:10px;
             border:red;
         }

     </style>

 </head>
 <body>
     <div id="category">
         <ul>
             <li>Test</li>
             <li>Test12321321</li>
             <li>Test111</li>
             <li>Test11</li>
             <li>Test</li>
             <li>Test</li>
             <li>Test</li>
             <li>Test</li>
             <li>Test</li>
             <li>Test</li>
             <li>Test</li>
             <li>Test</li>
             <li>Test</li>
             <li>Test</li>
         </ul>
     </div>
     <script type="text/javascript">
         jQuery(function($){
             var ul_width = 0 ;
             $("#category ul li").each(function(index,value){
                 var width = $(value).width();
                 //40是padding-left + padding-right + margin-left + margin-left
                 ul_width += (width + 40);
                 //console.log(width);
             });
             $("#category ul").width(ul_width);
         });

     </script>
 </body>
 </html>

最终的效果图是: