Question

内联<li>元素不会将自己定位在父div中。当我在父div上设置overflow:auto但没有它时，这是可以的请帮助我理解它们是如何脱离父母的。

这是我的代码：

＆＃13;

body {
  margin: 0;
  padding: 0;
}

div {
  background-color: black;
  color: red;
  padding-top: 2px;
  padding-bottom: 2px;
}

li {
  display: inline;
  float: right;
}

ul {
  list-style-type: none;
}

＆＃13;

<h1>BUSSINESS NAME</h1>

<div>
  <ul>
    <li>HOME</li>
    <li>SERVICE</li>
    <li>ABOUT</li>
    <li>CONTACT</li>
  </ul>
</div>

＆＃13;

Answer 1

这是因为，如果父元素只包含浮动元素，则需要清除浮点数，否则父级的高度将完全折叠为空。您可以查看此SO主题以获取更多信息：How do you keep parents of floated elements from collapsing?。

编辑：感谢Andrew Bone指出这一点，但你的布局也可以在不使用花车的情况下实现。

body {
  margin: 0;
  padding: 0;
}

div {
  background-color: black;
  color: red;
  padding-top: 2px;
  padding-bottom: 2px;
}

li {
  display: inline;
}

ul {
  list-style-type: none;
  text-align: right;
}

<h1>BUSSINESS NAME</h1>

<div>
  <ul>
    <li>HOME</li>
    <li>SERVICE</li>
    <li>ABOUT</li>
    <li>CONTACT</li>
  </ul>
</div>

内联<li>带浮动的元素不会将自己置于其父级中

1 个答案: