全宽水平导航条,间距均匀

Question

初始点:

起点http://img12.imageshack.us/img12/3100/example1a.gif

终点:

终点http://img846.imageshack.us/img846/799/example2w.gif

我正在尝试使用水平导航栏来填充100%的容器.在第一个示例中,您将看到所有项目都与左侧对齐.我试图让它填充容器的整个宽度,如第二个例子所示.我希望所有项目之间的间距是统一的(不像它显示的方式,我只是快速地将它们放在一起,让你知道我正在尝试做什么).我需要文本不是图像,它进入的容器是流动的不固定.

Answer 1

使用静态数量的元素很容易 - 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');
    });
}

完整的例子在这里