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

Question

我想在跨距之间添加空间,以便最左边和最右边的跨距将接近内部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

对于信息和旧浏览器，text-align:justify+ 生成额外行的伪元素仍然很有用。对于非常旧的浏览器（IE5），将伪代码转换为标签（跨度），技术很旧但在flex不可用或不需要的地方仍然有效。

编辑：如果你读得太快，这里没有什么text-justify;）

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