初始点：
starting point http://img12.imageshack.us/img12/3100/example1a.gif
终点：
end point http://img846.imageshack.us/img846/799/example2w.gif
我想要一个水平的导航栏,填充100％的容器.在第一个例子中,您会看到所有的项目与左边对齐.我试图让它填充容器的整个宽度,如第二个例子所示.我想要所有的项目之间的间距是统一的(不像显示的方式,我只是把它放在一起快速给你一个想法我想做什么).我需要的文字不是一个图像,它所进入的容器是流体不固定的.
解决方法
使用静态数量的元素很容易 –
http://jsfiddle.net/X56cJ/
但是,如果要在文本之间具有均匀的间距,而不是元素本身,那就变得棘手.再次,如果元素的数量没有改变,你可以用css类和静态宽度来实现.否则它必须是javascript
编辑：这是在元素之间获得相同空间的JavaScript方式.
HTML：
<ul class="menu">
<li>About Us</li>
<li>Our Products</li>
<li>FAQs</li>
<li>Contact</li>
<li>Login</li>
</ul>
JS：
function alignMenuItems(){
var totEltWidth = 0;
var menuWidth = $('ul.menu')[0].offsetWidth;
var availableWidth = 0;
var space = 0;
var elts = $('.menu li');
elts.each(function(inx,elt) {
// reset paddding to 0 to get correct offsetwidth
$(elt).css('padding-left','0px');
$(elt).css('padding-right','0px');
totEltWidth += elt.offsetWidth;
});
availableWidth = menuWidth - totEltWidth;
space = availableWidth/(elts.length);
elts.each(function(inx,elt) {
$(elt).css('padding-left',(space/2) + 'px');
$(elt).css('padding-right',(space/2) + 'px');
});
}
全文here
