Width = Parent Width CSS3

Question

我已經讀了一些關於CSS3計算的內容，但是我特別難以找到它。我正在用下拉菜單建立一個網站，並且我希望下拉菜單與父項目的寬度相匹配，該項目的寬度是可變的。我總是可以爲每個下拉菜單設置一個特殊的ID或類，但這有點痛苦。

的HTML的結構類似於：

<ul> 
    <li> 
     <a href="#">Parent Item</a> 
     <ul class="sublist"> 
      <li><a href="#">Sub Item</a></li> 
      <li><a href="#">Sub Item</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Normal Item</a></li> 
    <li><a href="#">Normal Item</a></li> 
    <li> 
     <a href="#">Parent Item</a> 
     <ul class="sublist"> 
      <li><a href="#">Sub Item</a></li> 
      <li><a href="#">Sub Item</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Normal Item</a></li> 
</ul> 

是否有使用CSS3將其設置爲寬度=父寬度或什麼什麼辦法？

Answer 1

將父物品包裝在一個div中，並將ul的寬度設置爲100％（如果您希望填充時寬度較小）和position：relative，則將該ul嵌套在該div內。

所以......

<li> 
    <div id='parent'><a href....></a> 
     <ul class='sublist' style='width:100%;'> 
      <li>...</li> 
     </ul> 
    </div> 
</li> 

您可能需要加強與地位：相對的取決於子列表UL對現有的樣式。 Dave