Jak dodać spację między elementami, aby wypełnić swój pojemnik div?

Question

Chcę dodać spację między przęsłami, tak aby skrajne lewa i prawa krawędź znajdowały się blisko krawędzi wewnętrznego div. Próbowałem dodać następującą regułę, ale nie przyniosło to żadnego efektu.

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

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

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

ilustracja tego, co próbuję osiągnąć podano poniżej:

Więc, co mi brakuje?

Answer 1

Możesz to zrobić z Flexbox i 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

Dla Infos i starsze przeglądarki, text-align:justify + element pseudo generować dodatkowy przewód może nadal być przydatny. Dla naprawdę starej przeglądarki (IE5), zamień pseudo na tag (span), technika jest cicha, stara, ale nadal wydajna, gdzie flex nie jest dostępna.

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