0

我有一个嵌套列表，例如：

<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>

我希望 class="flyoutfourCol" 中的所有 li 都彼此相邻浮动。在列中。但除非我为“flyoutfourCol”设置了~900px 的最小宽度，否则每个 li 元素都会折叠到前一个元素之下。

这就是我希望我的下拉列表看起来的样子：

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

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

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

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

4

1 回答 1

1

In your case, yes, because your .flyout submenu is inheriting the width from its parent, your "weddings" li, which does not have a width of 900px. If you remove the width from your flyout div and add it to your "weddings" parent li your submenu will inherit that same width and will not need to be explicitly given a width. So your answer is yes, you need to add a width to your submenu in order to conform to its own width, otherwise it will be inherited from the parent.

于 2012-04-12T14:09:55.107 回答