Cách thêm khoảng cách giữa các phần tử để chúng lấp đầy div vùng chứa của chúng?

Question

Tôi muốn thêm khoảng cách giữa các số kéo dài để các cạnh ngoài cùng bên trái và bên phải sẽ gần với các cạnh của div bên trong. Tôi đã cố gắng thêm quy tắc sau, nhưng nó không có hiệu lực.

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

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

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

Minh họa về những gì tôi đang cố gắng để đạt được đưa ra dưới đây:

Vì vậy, tôi thiếu gì?

Answer 1

Bạn có thể thực hiện việc này với Flexbox và 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

Đối Infos và trình duyệt cũ, text-align:justify + một yếu tố giả để tạo ra một dòng phụ vẫn có thể có ích. Đối với trình duyệt thực sự cũ (IE5), biến pseudo thành một thẻ (span), kỹ thuật là yên tĩnh cũ nhưng vẫn hiệu quả trong đó flex không phải là avalaible.

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