Question

起点：

starting point http://img12.imageshack.us/img12/3100/example1a.gif

结束点：

end point 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');
    });
}

完整示例here

Answer 2

在父级上使用display：table，并在子级上显示：table-cell就可以了。＆lt; = IE7。

不支持此功能

http://codepen.io/simply-simpy/pen/jzski

Answer 3

如果您知道自己拥有多少元素，则可以将每个元素的宽度指定为百分比。否则，如果不使用表格或javascript，将无法实现。

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

3 个答案: