Question

我经常遇到一个问题，就是一行中的所有按钮都没有足够的空间。拿this fiddle for example。如果有足够的空间，则所有元素都垂直居中。如果谎言被打破，它们将被推入下一行，但它们之间不会保持适当的垂直间距。

我通常采用的解决方法是在按钮上添加margin-bottom，并从容器中删除padding-bottom。 this is what I mean。

但是现在我不能将我的容器（.controls class）与其他元素一起使用，因为并非所有元素都包含可以插入下一行的按钮。

有没有一种方法来保存容器padding:10px;，并且在按钮之间保持垂直间距，并且具有很好的换行符？

.controls {
  text-align: center;
  background-color: rgb(217, 241, 238);
  padding: 10px 10px 10px 10px;
}

button {
  font-size: 14px;
  background-color: rgb(181, 220, 216);
  border: none;
  padding: 0.5em 1em;
}

<section class="controls">
  <button id="new-file">New File</button>
  <button id="open-file">Open File</button>
  <button id="save-markdown" disabled>Save File</button>
  <button id="revert" disabled>Revert</button>
  <button id="save-html">Save HTML</button>
  <button id="show-file" disabled>Show File</button>
  <button id="open-in-default" disabled>Open in Default Application</button>
</section>

Answer 1

步骤：

在容器上设置display: flex; justify-content: center; flex-wrap: wrap;，使其居中并根据需要将元素绕行。
在按钮上设置margin: 0.5em;（或您喜欢的任何值），以使其在水平和垂直方向上彼此隔开。
为了进行测试，将resize: horizontal; overflow: auto;添加到了容器中，以便您可以实时查看它的调整情况。在您的实际代码中不需要这些。您可以改为调整浏览器的大小。

要求的解决方案（以确保我正确理解了这个问题）：

保管容器padding:10px;-不完整
- 感谢@TemaniAfif指出OP正在尝试将视觉填充保持在10px。当OP要求我们不要更改容器的填充（例如将底部归零）时，这就是这个问题的棘手部分。
- 经过一个小时左右的研究，我认为flexbox不可能做到这一点。 display: grid与grid-gap接近，但是它需要子元素的结构化大小调整。有关已知问题，请参见下面的链接；有关问题，请参见下面的技巧，但是这些问题都无法超越容器填充限制...
换行符很好-完成
按钮之间的垂直间距-完成

.controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: space-between;
  background-color: rgb(217, 241, 238);
  /* must be 10px for all sides; must appear 10px visually */
  padding: 10px;
  resize: horizontal;
  overflow: auto;
}

button {
  font-size: 14px;
  background-color: rgb(181, 220, 216);
  border: none;
  padding: 0.5em 1em;
  /* while this spaces buttons from each other, it also adds visual space to the container padding */
  margin: .5em;
}

<section class="controls">
  <button id="new-file">New File</button>
  <button id="open-file">Open File</button>
  <button id="save-markdown" disabled>Save File</button>
  <button id="revert" disabled>Revert</button>
  <button id="save-html">Save HTML</button>
  <button id="show-file" disabled>Show File</button>
  <button id="open-in-default" disabled>Open in Default Application</button>
</section>

相关链接：

Answer 2

这是在flexbox存在之前所做的事情：

.controls {
    text-align: center;
    background-color: rgb(217, 241, 238);
    padding: 10px 10px 5px;
  }
  
  button {
    font-size: 14px;
    background-color: rgb(181, 220, 216);
    border: none;
    padding: 0.5em 1em;
    margin: 0 5px 5px 0;
  }

<section class="controls"
    ><button id="new-file">New File</button
      ><button id="open-file">Open File</button
      ><button id="save-markdown" disabled>Save File</button
      ><button id="revert" disabled>Revert</button
      ><button id="save-html">Save HTML</button
      ><button id="show-file" disabled>Show File</button
      ><button id="open-in-default" disabled>Open in Default Application</button
      ></section>

上述技术的问题在于，您需要严格控制元素之间的空白。在您的示例中，“适当” 水平间距为“不合适” 。原因是<button>的默认值为display:inline，并且>和下一个<之间的空格/制表符/返回由浏览器呈现为空格（像单词之间的空格）。

“正确”的做法是使用margin控制项目之间的间距，直到像素为止。

但是那些时代已经过去了。今天达到相同结果的真正正确（现代）方法是使用flexbox：

.controls {
    background-color: rgb(217, 241, 238);
    padding: 7.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
  }
  
  button {
    font-size: 14px;
    background-color: rgb(181, 220, 216);
    border: none;
    padding: 0.5em 1em;
    margin: 2.5px;
  }

<section class="controls">
      <button id="new-file">New File</button>
      <button id="open-file">Open File</button>
      <button id="save-markdown" disabled>Save File</button>
      <button id="revert" disabled>Revert</button>
      <button id="save-html">Save HTML</button>
      <button id="show-file" disabled>Show File</button>
      <button id="open-in-default" disabled>Open in Default Application</button>
    </section>

我发现flexbox技术更清洁，更易于控制/维护/缩放。

当元素被推到下一行时保持间距

2 个答案: