使子元素不影响宽度，但影响父 li 的高度?

问题描述：

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

If you have a simple 2 layer list like so:

<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 级.

i currently have each 1st level li floating left and no widths have been defined (and i want to keep it that way). However if the text in a 2nd level li is longer than the 1st level li then the 1st level one will expand to the 2nd level.

我怎样才能停止这种扩张?请记住，第 2 级项目是块状的，并且不绝对定位.

How can i stop this expansion? baring in mind the 2nd level items are block and NOT absolutely positioned.

答

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

By positioning your second level list absolutely you'll take it out of the natural flow of the document.

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

This will stop the first level li from expanding to accomodate the size of the second level ul

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

工作示例

使子元素不影响宽度，但影响父 li 的高度?

相关推荐