html - 使子元素不影响宽度，但影响父元素的高度？

Question

如果你有一个像这样的简单的 2 层列表:

<ul>

    <li><a href='#'>Item 1</a></li>
    <li><a href='#'>Item 2</a></li>
    <li>
        <ul>
            <li><a href='#'>Sub-Item 1</a></li>
            <li><a href='#'>Sub-Item 2</a></li>
            <li><a href='#'>Sub-Item 3</a></li>
        </ul>
    </li>
    <li><a href='#'>Item 4</a></li>

</ul>

我目前有每个第一级 li 向左浮动并且没有定义宽度(我想保持这种状态)。但是，如果第 2 级 li 中的文本比第 1 级 li 中的文本长，则第 1 级将扩展到第 2 级。

我怎样才能停止这种扩张？ 请记住，第二级元素是 block 状的并且不是绝对定位。

Answer 1

通过绝对定位您的二级列表，您将把它从文档的自然流中移除。

这将阻止第一层 li 扩展以容纳第二层 ul 的大小

ul li {
  position:relative;
}
ul li ul{
  position:absolute;
}

Working example