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

Question

我想在a里面调整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和最后一个必须像浮左和向右浮动......而这个解决方案将每件事都集中在这样的事情上:

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>

如果要最大化浏览器兼容性,请确保还添加正确的供应商前缀:

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

Answer 2

可能是吧

text-align: justify- 这个功能适用于文本,以及我们的line-block(display: inline-block)点,实际上,它们是连续不可分割的单词,这种行为很自然.

顺便说一句,值得考虑的是text-align: justify继承属性,所以text-align: left在下一个后代 - 一个必要的措施.通过这种方式,我们将返回作为前一状态块的内容的对齐.

这个算法不适用于最后一行,并且适用于除她之外的所有行.因此,使用:after我添加到另一个元素的末尾,安抚奶嘴,并将其拉伸到宽度的100%,从而迫使他伸展到列表中的最后一行.

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

div {    
    text-align: justify; 
    font-size: 0;
}
div:after {
    width: 100%;
    height: 0;
    visibility: hidden;
    overflow: hidden;
    content:'';
    display: inline-block;
}
div > div {
    background: #E76D13;
    width: 100px;
    height: 100px;
    display: inline-block;
    text-align: left;
    border: 1px solid #000;    
    line-height: normal;
    font-size: 14px;
    vertical-align: top;    
}

<div>
    <div>1</div>
   <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>