Question

我有一些嵌套的<ul>，我希望它们具有相同的高度：最高的高度。我无法指定任何<ul>的高度，因为它取决于其中<li>的数量。

我想我可以使用一些js来解决这个问题，但我很好奇是否可以使用CSS修复它。

我创建了一个简单的小提琴演示：http://jsfiddle.net/vnFLK/2/

<nav>
    <ul>
        <li>Li 1
            <ul>
                <li>Sub 1</li>
                <li>Sub 2</li>
            </ul>
        </li>
        <li>Li 2
            <ul class="green">
                <li>Sub 1</li>
                <li>Sub 2</li>
                <li>Sub 3</li>
            </ul>
        </li>
    </ul>
</nav>

带有绿色边框的<ul>应该确定根<ul>的高度，然后我希望兄弟<ul>获得相同的高度。绿色<ul>向右推200％只是为了更清楚。

这是导航的简化表示，其中<ul>是一个子菜单，将被拉到父菜单上。因此，它们需要具有相同的高度以防止显示父菜单。

/埃里克

Answer 1

绝对定位的元素不再是文档流的一部分 - 它们充当新的上下文。因此，父元素不知道子元素的大小，也无法调整自己的大小来匹配它。

没有CSS解决方案。你需要使用JavaScript。

父<ul>与孩子<ul> </ul> </ul>相同的高度

1 个答案: