html中导航中间的间隔,css – 全宽水平导航栏,均匀间隔的物品

使用静态数量的元素很容易 –

http://jsfiddle.net/X56cJ/

但是,如果要在文本之间具有均匀的间距,而不是元素本身,那就变得棘手.再次,如果元素的数量没有改变,你可以用css类和静态宽度来实现.否则它必须是javascript

编辑：这是在元素之间获得相同空间的JavaScript方式.

HTML：

• About Us
• Our Products
• FAQs
• Contact
• Login

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');

});

}