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

我在我的网站上有一个横向的subnav，我需要将它居中放置在布局中。每个subnav都有不同数量的元素，所以我需要计算UL的宽度，然后将其添加到包装div中，以便它能正确居中。需要根据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());

这会给我一个元素的宽度，而不是所有元素的总和。任何帮助是极大的赞赏！。

来源

2011-01-20 Mike Muller

或者你可以只用做css ... – meo

@meo我不相信你可以在CSS中做这个特定的事情。问题是ul的宽度是动态的，因为它的列表项是动态的。由于div是一个块级元素，它将扩展以填充它的容器。为了居中div（注意不是ul），你需要约束它的宽度。根据ul的动态情况，海报可能没有必要的最小/最大值，只需css – Adrian

即可，请查看我的回答 – meo

您可以使用它来获得UL的呈现宽度：

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

忘记了“PX”结尾。

说明：ul的渲染宽度将等于所有列表项宽度的总和，这将包括列表项的任何边距和填充调整。我不相信jquery的.width（）包含您调用它的元素（本例中为ul）的边距或填充，因此您可能必须考虑这一点。

编辑：改变选择，以便它只会选择第一个UL遇到在这个例子是外UL（在列表嵌套的情况下）

来源

2011-01-20 23:38:08 Adrian

这在大多数情况下都适用。当只有一个元素时，宽度为850px宽。它适用于我定位特定ID的情况。当我嵌套UL时，数学不准确。有任何想法吗？ –

确认已更改，因为您的评论对此进行了解释。如果你在容器中有多个ul（比如在嵌套ul的情况下），你需要确保你只选择你打的第一个ul，它应该是外部ul。改变包含这个的答案。 – Adrian

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

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

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

来源

2011-01-20 23:46:53

用CSS做：http://jsfiddle.net/yW8mq/2/

编辑：如您在您的评论中写道，你还需要居中DIV。所以，做我做的UL到div同样的事情

来源

2011-01-20 23:54:10 meo

这对我IE无效。 – Adrian

然后你仍然可以通过内联的方式做到这一点，并使下一个子元素块...或使用内嵌块黑客，使用内联并将元素缩放设置为1. http://grasshopperpebbles.com/css/css-inline -block-ie7-hack /（zoom 1修正了ie中的所有内容:)）更好的方法是使用js – meo

我通常认为使用一点javascript比开始使用浏览器特定的黑客更好。我应该澄清我的上述评论，我不认为这可以用css完成，而不诉诸于黑客 – Adrian

这应该做的伎俩：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>

来源

2013-06-19 20:33:27 Tiquelou

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

回答

相关问题