CSS浮动列表和部分之间的底部边距[重复]

Question

我正在尝试创建一个浮动项目列表，这些项目分为 2 个部分。

问题是，由于我认为浮动项目，我为在 2 个 div 之间留出一些空间而应用的边距无法正常工作。

https://jsfiddle.net/hc7muswj/

我想在第一个列表和下一个 H2 之间留一些空间。

如何使第一个 div 具有“稳固性”以允许我从它的底部留出边距？

.lozzy {
  width: 300px;
  margin-bottom: 20px !important;
}

.lozzy h2 {
  clear: both;
}

.lozzy ul {
  padding-left: 0px !important;
}

.lozzy ul li {
  width: fit-content;
  float: left;
  padding: 5px 15px;
  border-radius: 5px;
  margin-right: 10px;
  margin-top: 5px;
  margin-bottom: 5px !important;
  font-size: 16px!important;
  color: #f3f3f3;
  background-color: #404040;
  display: inline-block;
}

<div class="lozzy">
  <h2>Skills</h2>
  <ul>
    <li>First thing</li>
    <li>Second thing</li>
    <li>Third thing</li>
    <li>Fourth thing</li>
    <li>Fifth thing</li>
  </ul>
</div>

<div class="lozzy">
  <h2>Toolkit</h2>
  <ul>
    <li>First thing</li>
    <li>Second thing</li>
    <li>Third thing</li>
    <li>Fourth thing</li>
    <li>Fifth thing</li>
  </ul>
</div>

Answer 1

问题是因为float。 float 不应该用于样式目的。这是一个误用的黑客。使用 flexbox 代替。 Float 用于在文本段落中浮动图像。使用Flexbox的实际正确工具可以实现您想要的布局。

添加：.lozzy ul { display: flex; flex-wrap: wrap; }。

也不要使用这么多!important;。它们几乎总是（除了覆盖模板等）表明某些事情做错了。一个问题在解决问题时是相当隐藏的。例如，就像您使用 !important 隐藏列表项目符号一样。你可以简单地使用list-style: none;

.lozzy {
  width: 300px;
  margin-bottom: 20px;
}

.lozzy ul {
  padding-left: 0px;
  display: flex;
  flex-wrap: wrap; 
  list-style: none;
}

.lozzy ul li {
  padding: 5px 15px;
  border-radius: 5px;
  margin-right: 10px;
  margin-top: 5px;
  margin-bottom: 5px;
  font-size: 16px;
  color: #f3f3f3;
  background-color: #404040;
}

<div class="lozzy">
  <h2>Skills</h2>
  <ul>
    <li>First thing</li>
    <li>Second thing</li>
    <li>Third thing</li>
    <li>Fourth thing</li>
    <li>Fifth thing</li>
  </ul>
</div>

<div class="lozzy">
  <h2>Toolkit</h2>
  <ul>
    <li>First thing</li>
    <li>Second thing</li>
    <li>Third thing</li>
    <li>Fourth thing</li>
    <li>Fifth thing</li>
  </ul>
</div>

Answer 2

默认情况下，浮动元素不会被其容器包裹。 （如果你给.lozzy 添加边框或背景，你就会明白我的意思了。）

将 overflow: auto; 添加到容器元素 (.lozzy) 以使其包裹（即包含）浮动项目（从而拥有您定义的 margin-bottom）

.lozzy {
  width: 300px;
  margin-bottom: 20px !important;
  overflow: auto;
}

.lozzy h2 {
  clear: both;
}

.lozzy ul {
  padding-left: 0px !important;
}

.lozzy ul li {
  width: fit-content;
  float: left;
  padding: 5px 15px;
  border-radius: 5px;
  margin-right: 10px;
  margin-top: 5px;
  margin-bottom: 5px !important;
  font-size: 16px!important;
  color: #f3f3f3;
  background-color: #404040;
  display: inline-block;
}

<div class="lozzy">
  <h2>Skills</h2>
  <ul>
    <li>First thing</li>
    <li>Second thing</li>
    <li>Third thing</li>
    <li>Fourth thing</li>
    <li>Fifth thing</li>
  </ul>
</div>

<div class="lozzy">
  <h2>Toolkit</h2>
  <ul>
    <li>First thing</li>
    <li>Second thing</li>
    <li>Third thing</li>
    <li>Fourth thing</li>
    <li>Fifth thing</li>
  </ul>
</div>

顺便说一句：在同一个元素上使用float: left 和 display: inline-block; 是多余的。您也可以通过简单地删除float: left 来解决您的问题，因为display: inline-block; 会给您带来非常相似的结果。在这种情况下，您不需要我在上面的 sn-p 中使用的容器上的 overflow 设置：

.lozzy {
  width: 300px;
  margin-bottom: 20px !important;
}

.lozzy h2 {
  clear: both;
}

.lozzy ul {
  padding-left: 0px !important;
}

.lozzy ul li {
  width: fit-content;
  padding: 5px 15px;
  border-radius: 5px;
  margin-right: 10px;
  margin-top: 5px;
  margin-bottom: 5px !important;
  font-size: 16px!important;
  color: #f3f3f3;
  background-color: #404040;
  display: inline-block;
}

<div class="lozzy">
  <h2>Skills</h2>
  <ul>
    <li>First thing</li>
    <li>Second thing</li>
    <li>Third thing</li>
    <li>Fourth thing</li>
    <li>Fifth thing</li>
  </ul>
</div>

<div class="lozzy">
  <h2>Toolkit</h2>
  <ul>
    <li>First thing</li>
    <li>Second thing</li>
    <li>Third thing</li>
    <li>Fourth thing</li>
    <li>Fifth thing</li>
  </ul>
</div>