全宽水平导航栏，其中项目间隔均匀

Question

起点：

终点：

我试图拥有一个填充 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');
    });
}

完整示例此处

Answer 2

在你的父级上使用 display: table ，在你的子级上使用 display: table-cell 就可以了。 <= IE7 不支持此功能。

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

Answer 3

如果您知道将拥有多少个元素，则可以将每个元素的宽度指定为百分比。否则，如果不借助表格或 javascript，这是不可能的。