html - 如何删除内联子容器右侧的额外空间？

Question

我有一个包含一些内联子元素的父容器，并且父容器具有动态宽度。它看起来很棒，直到所有子元素都在一行中，但是当您缩小浏览器窗口并且子元素转到下一行时，它会在父容器的右侧留下额外的空间。正如您在下图中看到的子项和容器边框之间的额外空间。

.container {
  display: inline-block;
  border: 5px solid #000;
  padding: 10px;
}

.child {
  display: inline-block;
  background-color: #F00;
  width: 100px;
  height: 100px;
  margin: 5px;
}

<div class="container">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

我想知道两件事:

1:为什么内联子元素跳到下一行后父容器的宽度没有缩小？

2:是否有任何解决方法可以使用 CSS 删除多余的空间？

---

_{请注意，我对 .child 标签使用了 display: inline-block; 只是为了演示这一点，但我也可以使用任何 css 属性，例如 flex 或 float 来实现这一点。}

Answer 1

您可以使用 flexbox反而。将父容器的显示更改为 display: flex 和 fiddle .

再次阅读帖子后，我不确定您是否特别想使用display: inline-block。对不起!