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左侧浮动并且没有定义宽度（我想保持这种方式）。但是，如果第二级li中的文本长于第一级li，则第一级{1}将扩展到第二级。

我怎样才能阻止这种扩张？请记住，第二级项目是阻止，不绝对定位。

Answer 1

通过绝对定位您的第二级列表，您将从文档的自然流程中取出它。

这将阻止第一级li扩展以适应第二级ul的大小

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

Working example

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

1 个答案: