如何在元素之间添加空间以便它们填充容器div？

Question

我想在 spans 之间添加空格，以便最左边和最右边的跨距接近内部div 的边缘。我试图添加以下规则，但它没有效果。

span.icon-square{
    margin:0 auto;
}

span.icon-square:first-child{
    margin-left:0;
}

span.icon-square:last-child{
    margin-right:0;
}

我想要实现的目标如下：

那么，我错过了什么？

Answer 1

您可以使用Flexbox和justify-content: space-between执行此操作。

.content {
  display: flex;
  justify-content: space-between;
  max-width: 400px;
  margin: 0 auto;
  background: #A0C5E8;
  padding: 10px 0;
}

span {
  width: 50px;
  height: 50px;
  background: black;
}

<div class="content">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

Answer 2

对于Infos和旧版浏览器，text-align:justify +生成额外行的伪元素仍然有用。对于非常古老的浏览器（IE5），将伪转换为标签（span），技术是安静的，但在flex不可用的情况下仍然有效。

div {
  background:#C3DEB7;
  padding:1px;
}
p {
  background:#A0C5E8;
  margin:1em auto;
  width:80%;
  text-align:justify;
}
p:after {
  content:'';
  width:100%;
}
span, p:after {
  display:inline-block;
}
span {
  border-radius: 15px;
  background:#7A9FC1;
  line-height:60px;
  width:60px;
  margin-top:1em;
  text-align:center;
  color:white;
  box-shadow:inset 0 0 0 1px ;
}
span:nth-child(1) {
  background:#709AC2;
}
span:nth-child(3) {
  background:#6D93B7;
}
span:last-child {
  background:#948798;
}

<div>
  <p>
    <span> span</span>
    <span> span</span>
    <span> span</span>
    <span> span</span>
  </p>
</div>

http://codepen.io/anon/pen/NNbXEm