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

【问题标题】：Full width horizontal nav bar with evenly spaced items具有均匀间隔项目的全宽水平导航栏
【发布时间】：2011-10-04 18:36:33
【问题描述】：

起点：

终点：

我正在尝试让水平导航栏填充 100% 的容器。在第一个示例中，您将看到所有项目都向左对齐。我试图让它填满容器的整个宽度，如第二个示例所示。我希望所有项目之间的间距是统一的（与显示的方式不同，我只是快速将它们放在一起让您了解我正在尝试做什么）。我需要文本不是图像，并且它进入的容器是流体而不是固定的。

【问题讨论】：

您通常需要知道您的菜单中有多少项目才能完成这项工作。如果您有 5 个项目，则将每个项目设置为 20% 宽度等。

标签： css navigationbar

【解决方案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

【讨论】：

是的，我将拥有静态数量的元素，这就是我所追求的文本之间的统一间距。关于使用 Javascript 路线的任何建议？
如果你有一个静态数量的元素，那么你可以使用纯 CSS 来指定每个元素的宽度。获得正确的宽度需要一些时间，但这是可行的。虽然您可以为此使用 JS，但 CSS 会更简单一些。

【解决方案2】：

在你的父母上使用 display: table ，在你的孩子上使用 display: table-cell 就可以了。

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

【讨论】：

只有在所有标题大小相同的情况下才有效。将<li><a href="#">fivesixseveneightnineten</li> 添加到您的列表中，您就会明白我的意思了。
谢谢@bronson——我添加了一个宽度：25%，它适用于更长的链接。 -- codepen.io/simply-simpy/pen/jzski
Flex-box 可能是一个更好的解决方案。

【解决方案3】：

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

【讨论】：