Question

我正在编写一个JQuery脚本，它使用margin-right在包含<ul>的内容中均匀分布可变大小的水平导航链接。算法是：

答：获取<ul>容器的宽度。

B：在容器内添加所有<li>项的宽度。

C：通过从A中减去B并除以容器中<li>项的数量减1来计算除最后<li>之外的每个项目的右边距。

但是我的算法或代码中存在缺陷，因为链接溢出容器。这是我的代码。你能帮忙吗？

谢谢， -Northk

    var containerWidth = $('#main-nav ul').width();
    var linksWidth = 0;
    $('#main-nav ul').children().each(function() {
        linksWidth += $(this).width();
    });
    var linkSpacing = Math.floor((containerWidth - linksWidth) / ($('#main-nav ul').children().length - 1));
    $('#main-nav ul').children().css('margin-right', linkSpacing + "px");
    $('#main-nav ul').children().filter(":last").css('margin-right', 0);

HTML看起来像：

<nav id="main-nav">
<ul>
<li>
<a href="#">home</a>
</li>
<li>
<a href="#">link-number-2</a>
</li>
</ul>
</nav>

Answer 1

我只是假设了一些css规则，但我相信这就是你要找的东西。 http://jsfiddle.net/TEDhb/

$('#main-nav ul li:not(:last-child)').css('margin-right', linkSpacing + "px");

Answer 2

讨厌这样说，但它对我来说很好。 Here is the jsFiddle为它（我假设最小的CSS）。代码的顶部是你的代码（可以工作），底部注释掉的部分是我的版本（它不会增加任何东西，但效率更高）。

Answer 3

您应该除以LI的数量，而不是LIs-1的数量。

JQuery在无序列表问题中等距离导航链接

3 个答案: