找了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>
最终的效果图是:
