html - 为什么我的 <UL> 不会扩展以包装它包含的 <LI> 元素？

Question

我正在使用 WordPress。我有一个用列表构建的菜单。

基本上，它的样本是这样的:

<ul>
    <li>FrontPage</li>
    <li>MenuItem</li>
    <li>ParentMenuItem
        <ul> <--- This wont adjust its height to fit its children
            <li>MenuItemChild</li>
            <li>MenuItemChild</li>
        </ul>
    </li>
    <li>MenuItem</li>
</ul>

现在 ParentMenuItem 不会展开并用其背景和边框覆盖其所有子项。我不知道为什么。我能够覆盖它的唯一方法是给它一个固定的高度。

Answer 1

将 ul 的 height 从 100% 更改为 auto:

height: auto;

您的 ul 高度太小的原因是因为您使用的是 100%，这意味着它将采用其父项的高度。它不意味着占用最大可用空间，也不意味着占用所有子级的高度总和。因为父级有 height: 33px，所以你的 ul 也有那个高度。