首先，我们知道容器水平居中的一般方法，比如我们做一个水平居中的导航：
[html]
<div class="header">
<ul class="nav">
<li></li>
<li></li>
<li></li>
</ul>
</div>
[/html]
如果<li>元素宽度是固定的（假设100px），而且数量是固定的（现在是3个），那么<ul>元素的宽度也就确定了，我们只要给<ul>加上margin:0 auto;width:300px;的样式就可以了。
但是如果<li>是动态读取的，数量不固定，那么<ul>的宽度就不是确定的，该怎么办呢？
我们可以用js来解决这个问题，就是js在页面加载后读取<ul>子元素<li>的数量，计算<ul>的宽度应该是多少。代码如下：
首先调用jquery.js。
[javascript]
$("ul.nav").css({"width":$("ul.nav li").length*100});
[/javascript]
您的赞助将会支持作者创作及本站运维
发表评论