css - UL 边界高于 LI

Question

我正在编写以下代码:

HTML:

<ul id="Generate">
  <li>Home1</li>
  <li>Home2</li>
  <li>Home3</li>
  <li>Home4</li>
</ul>

CSS:

#Generate {
  list-style-type:none;

  padding:0px;
  border:1px solid red;
}

#Generate > li {
  float:left;
  width:100px;
  text-align:center;
  background-color:red;
  color:white;
  border:1px solid blue;
  height:20px;
}

UL 边框作为一条实线出现在顶部。在其下方，我看到一行包含 LI 元素。我期望 UL 边框包含所有 li 元素。既然是 parent 。为什么浏览器会缩小 ul？

Answer 1

这是因为您在 UL 中 float 了所有的 li。如果容器仅包含 float 元素并且没有明确设置容器高度，则容器的结果高度将为零。

尝试将 overflow: auto 添加到您的 UL:

#Generate {
  list-style-type:none;
  overflow: auto;
  padding:0px;
  border:1px solid red;
}

此 URL 是所有“ float ”事物的重要资源。 查看标题为“大崩溃”的部分。 https://css-tricks.com/all-about-floats/