html - 如何在不使用 margin-left 的情况下集中 5 个 div？

Question

我试图让 5 个 div 在 div 内对齐，如下所示:

有没有办法不使用 margin-left 来做到这一点？

我的意思是..万一我想消除其中一个中间的 div 而它们仍然对齐？例如.. 如果我删除 div4，其他的将自动居中。像这样:

我找到了这样的解决方案:

#parent {
  width: 615px;
  border: solid 1px #aaa;
  text-align: center;
  font-size: 20px;
  letter-spacing: 35px;
  white-space: nowrap;
  line-height: 12px;
  overflow: hidden;
}
.child {
  width: 100px;
  weight: 100px;
  border: solid 1px #ccc;
  display: inline-block;
  vertical-align: middle;
}

但问题是:第一个 div 和最后一个 div 必须像向左浮动和向右浮动一样...并且此解决方案将所有内容居中，结果如下所示:

Answer 1

flexbox可能就是您正在寻找的答案。

#container {
  display: flex;
  justify-content: space-between;
  border: 1px solid black;
  background: #ccc;
}
#container>div {
  width: 100px;
  border: 1px solid black;
  background: #fff;
  height: 100px;
}

<div id="container">
  <div>box 1</div>
  <div>box 2</div>
  <div>box 3</div>
  <div>box 4</div>
  <div>box 5</div>
</div>

如果要最大化browser compatibility , 请务必添加正确的供应商前缀:

#container {
  display: -moz-flex;
  display: -ms-flex;
  display: -webkit-flex;
  display: flex;
  /* … */
}