在嵌套列表上是否需要最小寬度？

我有一個嵌套的列表，如：在嵌套列表上是否需要最小寬度？

<ul> 
    <li> 
     <a href="#" class="">Parent Links</a> 
     <!-- Flyoutwrapper is what expands when users hover over the parent links, the contents of flyoutwrapper will be changing, so I can not set a min-width or width --> 
     <div class="flyoutWrapper"> 
     <ul class="flyout fourCol"> 
      <li></li> 
      <li></li> 
     </ul> 
     </div> 
    </li> 
</ul>

我希望所有類=「彈出fourCol」的李的內線旁邊漂浮到對方。在列中。但除非我爲「flyout fourCol」設置〜900px的最小寬度，否則每個li元素會摺疊到前一個元素下面。

這就是我想我的下拉的樣子：

#nav .flyout.fourCol { min-width:900px; }

http://jsfiddle.net/t7esz/（這工作）

#nav .flyout.fourCol { width:auto; }

http://jsfiddle.net/sumcA/2/（這不起作用！）

來源

2012-04-12 illusorydeveloper

你的情況，是的，因爲你的.flyout子菜單是繼承其父母的寬度，你的「婚禮」li，它不具有的寬度。如果您從flyout div中刪除寬度並將其添加到您的「婚禮」父級li，則您的子菜單將繼承相同的寬度，並且不需要明確給出寬度。所以你的答案是肯定的，你需要爲你的子菜單添加一個寬度以符合它自己的寬度，否則它將從父項繼承。

來源

2012-04-12 14:09:55

謝謝！你對重構這個HTML有什麼建議嗎，這樣我就不必設置明確的寬度了？ – illusorydeveloper 2012-04-12 14:30:27

@illusorydeveloper你可以展開你父母的''li'，它應該取其父母的寬度（當正確固定時），然後將你的孩子'li's向左移動，儘管這會導致不想要的結果，所以你會更好運氣只需添加一個'min-width'，但這裏是一個沒有任何寬度聲明的演示：http://jsfiddle.net/sumcA/3/ – 2012-04-12 15:04:44

在嵌套列表上是否需要最小寬度？

回答

相關問題