需要根據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的寬度

回答

相關問題