css - 具有均匀间隔项目的全宽水平导航栏

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，就不可能。