我正在構建一個無序列表中有一個下拉無序列表的導航。我想使列表項目至少與「head」列表項目一樣寬，以便下拉菜單看起來正確。現在，由於訂單項的字符數比包含無序列表的訂單項少，因此下拉菜單更細。是否有可能使一個元素的寬度與另一個元素的寬度相同？

我想下訂單的服用點：

ul li ul { 
{width: *as wide as ul li*; 
}

是否有可能做到這一點沒有JavaScript和剛剛獨自內的CSS？

來源

2012-01-11 Doug Fir

是的。從技術上講，ul已經是相同的寬度，但它似乎不是由於邊距和填充。要改變這一狀況，使用這個CSS：

ul li ul { 
width:100%; 
margin-left:0; 
margin-right:0; 
padding-left:0; 
padding-right:0; 
}

您可能還需要包括以下CSS來改變填充的li孩子/保證金，以及：

ul li ul > li { 
width:100%; 
margin-left:0; 
margin-right:0; 
padding-left:0; 
padding-right:0; 
}

更新

在你的具體例子（張貼在評論中），問題是你已經設置了ul li ul的position的值爲absolute。這需要它的它的父（在關於處理width），但可以固定有以下CSS被添加到您現有的CSS：

ul li { 
position:relative; 
} 
ul li ul { 
width:100%; 
}

雖然這允許您設置子菜單是與父母寬度相同，它帶有使菜單項目換行的副作用（請參閱sui generis菜單）。爲了克服這個問題，可以使用下面的CSS來代替（除了你的jsfiddle）：

ul li { 
position:relative; 
} 
/* Due to 'min-width', this may not be compatible with all browsers */ 
ul li ul { 
min-width:100%; 
white-space:nowrap; 
}

來源

2012-01-11 20:56:41 0b10011

謝謝，但我試過。發生了什麼事是，下拉菜單列表項變得太寬 - 延伸到屏幕的最右側。這是因爲它們被設置爲可能顯示爲塊嗎？ – 2012-01-11 21:24:41

我將不得不看到更多的代碼才能更好地回答這個問題。首先，將其縮小到最低限度的代碼量（例如，去除頁眉，頁腳和其他不屬於菜單的任何其他內容），然後將其發佈到您的問題中，或發佈到諸如www.jsfiddle 。淨。一旦你這樣做，讓我知道，我會更新我的答案，以反映你的變化。 – 0b10011 2012-01-11 21:29:49

確定完成 - http://jsfiddle.net/fBJ7W/ 感謝您的反饋和幫助。這是主要清單中最後一個項目（回收木材）的下拉菜單。請注意下拉範圍如何變窄 – 2012-01-11 21:36:02

width:100%

，應該使孩子一樣寬父:)

來源

2012-01-11 20:55:57 Robert

試試這個。

ul li, ul li ul { 
    width:100px; 
}

來源

2012-01-11 20:55:58

這導致下拉菜單變得過寬，看上面的評論 - 或許是由於顯示塊？ – 2012-01-11 21:26:28

然後，如果您發佈完整的下拉代碼，我們就可以看到實際發生的情況，這可能會有所幫助。 – 2012-01-11 22:31:45

是否有可能使一個元素的寬度與另一個元素的寬度相同？

回答

更新

相關問題