Question

我非常生气，总是手动输入固定宽度直到div，具体取决于li标签包含多少字母

<div>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Information</a></li>
    <li><a href="#">Contact information example</a></li>
  </ul>
</div>

div{
background:red;
}
div ul li{
float:left;
}

这个div将与列表本身具有相同的高度，但是宽度将为0.我的问题是我必须在css文件中手动填写静态值以在li之后调整div这可能是okey在某些情况下，但是当您的导航动态生成时，它非常烦人。

Answer 1

给你的div：

display: inline-block;

就是这样:)）

这是一个DEMO

Answer 2

将以下内容添加到CSS中：

div {
    overflow: auto;
}

这将导致父div包含所有浮动的子元素（块格式化上下文）。

由于正常流程中没有内容，div将具有浮动元素的高度而不是匹配为0.

参见参考：http://www.w3.org/TR/CSS21/visuren.html#block-formatting

注意：使用display: inline-block将导致div根据浮动的子元素的宽度具有缩小到适合的宽度。

如何使div内的列表在列表中的内容后展开

2 个答案: