Question

我的网站上有一个水平的subnav，我需要在布局中居中。每个子空间都有不同数量的元素，因此我需要计算UL的宽度，然后将其添加到包装div中，以使其正确居中。

这是我的HTML

<div id="subNav">
<ul id="navsub_761243_795431">
<li><a href="/Asset/RIA">Why Choose a RIA</a></li>
<li><a href="/Asset/HowWeOperate">How We Operate</a></li>
<li><a href="/Asset/ethicalinvesting">Ethical Investing</a></li>
<li><a href="/Asset/IndependentCustodian.htm">Independent Custodian</a></li>
<li><a href="/Quest/home">Insure Quest</a></li>
</ul>
</div>

有时上面的列表将是2个元素，有时是1个，有时是6个。

这是我搞砸的jQuery。它位于文档就绪功能中。

$("#subNav").css("width", $("#subNav ul").children("li").innerWidth());

这将给出一个元素的宽度，而不是所有元素的总和。非常感谢任何帮助！。

Answer 1

您可以使用它来获取ul：

的渲染宽度

$("#subNav").css("width", $("#subNav ul:first").width() + "px");

最后忘记了“px”。

解释：ul的渲染宽度将等于所有列表项宽度的总和，这将包括列表项的任何边距和填充调整。我不相信jquery的.width（）包含你调用它的元素上的边距或填充（在这种情况下是ul），所以你可能不得不考虑到这一点。

编辑：更改了选择器，以便它只选择遇到的第一个ul，在这个例子中是外部ul（在嵌套列表的情况下）

Answer 2

即使之前的答案是充分的。仅供参考，您必须指定选择器以获取特定的子项。然后你可以找到最大值。但是，这不会获得父级的宽度，而是它的子级的最大宽度。

您可以指定班级 <ul class="level-1"> <li class="item-i">I</li> <li class="item-ii">II </ul>

http://api.jquery.com/children/

Answer 3

这应该可以解决问题：http://jsfiddle.net/nbzN3/

JS:

$.each($('.subNav ul').children(), function(i) {
    computedWidth += $('.subNav ul').children().eq(i).outerWidth();
});

$('.subNav:visible ul').width(computedWidth+10);

HTML:

<div id="subNav1" class="subNav">
    <ul id="navsub_761243_795431">
        <li><a href="#">Nav 1-1</a></li>
        <li><a href="#">Nav 1-2</a></li>
        <li><a href="#">Nav 1-3</a></li>
        <li><a href="#">Nav 1-4</a></li>
        <li><a href="#">Nav 1-5</a></li>
    </ul>
</div>

Answer 4

这应该可以解决问题：http://jsfiddle.net/nbzN3/

JS:

$.each($('.subNav ul').children(), function(i) {
    computedWidth += $('.subNav ul').children().eq(i).outerWidth();
});

$('.subNav:visible ul').width(computedWidth+10);

HTML:

<div id="subNav1" class="subNav">
    <ul id="navsub_761243_795431">
        <li><a href="#">Nav 1-1</a></li>
        <li><a href="#">Nav 1-2</a></li>
        <li><a href="#">Nav 1-3</a></li>
        <li><a href="#">Nav 1-4</a></li>
        <li><a href="#">Nav 1-5</a></li>
    </ul>
</div>

需要根据ul的宽度动态设置父div的宽度

4 个答案: