Question

我有一个嵌套列表，如：

<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 =“flyout fourCol”中的所有li都能彼此浮动。在专栏中。但除非我为“flyout fourCol”设置了~900px的最小宽度，否则每个li元素都会在前一个元素下方崩溃。

这就是我想要的下拉列表：

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

http://jsfiddle.net/t7esz/（这有效）

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

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

Answer 1

在您的情况下，是的，因为您的.flyout子菜单会从其父级继承宽度，即“婚礼”li，其宽度不是900px。如果您从flyout div移除宽度并将其添加到“婚礼”父级li，则子菜单将继承相同的宽度，并且不需要明确指定宽度。所以你的答案是肯定的，你需要在子菜单中添加一个宽度以符合自己的宽度，否则它将从父级继承。

嵌套列表中是否需要最小宽度？

1 个答案: