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元素。因为它是父母。为什么浏览器会缩小ul？

Answer 1

你确实把他自己的边界放在那里:)。

 #Generate {
 list-style-type:none;

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

所以这样做：

<style>
#Generate {
list-style-type:none;

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

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


</style>

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

或者你只是删除那一行...但我认为你明白了

Answer 2

这是因为你将所有的li都悬浮在UL中。如果容器仅包含浮动元素，并且没有明确设置容器高度，则容器的最终高度将为零。

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

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

此网址是所有内容的绝佳资源＆＃34; Float＆＃34;。查看标题为＆＃34; The Great Collapse＆＃34;的部分。 https://css-tricks.com/all-about-floats/

Answer 3

而不是float:left，而不是display:inline

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

Answer 4

IMHO浏览器会缩小ul，因为UL是一个流内容类别对象，正如我们从w3c规范中所知，正常流程中此类对象的宽度计算为＆＃39;＆＃39; margin-left＆＃39; +＆＃39; border-left-width＆＃39; +＆＃39; padding-left＆＃39; +＆＃39;宽度＆＃39; +＆＃39; padding-right＆＃39; +＆＃39; border-right-width＆＃39; +＆＃39; margin-right＆＃39; =包含块的宽度＆＃39; （W3C site）。所以，如果你想边缘只包含＆＃34; li＆＃34;元素，您可以添加＆＃39; display：inline-block;＆＃39;在#General的css规则中，如下所述：

  #Generate {
  list-style-type:none;

  padding:0px;
  border:1px solid red;
  display:inline-block;
}

https://jsfiddle.net/uw4krhL1/

UL边界高于LI

4 个答案: