Css 带有等距项目的全宽水平导航栏

起点：

终点：

---

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

如果您知道将有多少个元素，可以将每个元素的宽度指定为百分比。否则，如果不使用表或javascript，就不可能实现此功能。

使用静态元素数，很容易-

然而，如果你想在文本之间有统一的间距，而不是元素本身，这就变得很棘手了。同样，如果元素的数量没有改变，那么可以使用css类和静态宽度来实现。否则，它必须是javascript

编辑：下面是获取元素之间相同空间的JavaScript方法

HTML:

---

完整示例

在父对象上使用display:table，在子对象上使用display:table cell将实现此功能。这在中是不受支持的。您通常需要知道菜单中有多少项才能完成此项。如果你有5个项目，你将每个项目设置为20%的宽度等。是的，我将有一个静态的元素数量，这就是我拍摄的是文本之间的均匀间距。关于Javascript路线有什么建议吗？如果您有一个静态的元素数，那么您可以使用纯CSS来指定每个元素的宽度。这将需要一点时间来获得正确的宽度，但这是可行的。虽然你可以使用JS，但是CSS会更简单一些。只有当你所有的标题大小都一样的时候，这才有效。将fivesixseveneightnineten添加到您的列表中，您就会明白我的意思。谢谢@bronson--我添加了一个宽度：25%，并且它与更长的链接一起工作。-Flex box可能是一个更好的解决方案。

<ul class="menu">
    <li>About Us</li>
    <li>Our Products</li>
    <li>FAQs</li>
    <li>Contact</li>
    <li>Login</li>
</ul>

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