CSS 如何在元素之间添加空间以便它们填充其容器 div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36013118/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add space between elements so they fill their container div?
提问by Alexander Lomia
I want to add space between spansso that the leftmost and rightmost spans will be close to the edges of the inner div. I've tried to add the following rule, but it had no effect.
我想在跨度之间添加空间，以便最左边和最右边的跨度将靠近内部 div的边缘。我尝试添加以下规则，但没有效果。
span.icon-square {
margin: 0 auto;
}
span.icon-square:first-child {
margin-left: 0;
}
span.icon-square:last-child {
margin-right: 0;
}
The illustration of what I'm trying to achieve is given below:
下面给出了我要实现的目标的说明：
So, what am I missing?
那么，我错过了什么？
回答by Nenad Vracar
You can do this with Flexboxand justify-content: space-between.
你可以用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>回答by G-Cyrillus
For Infos and older browser, text-align:justify+ a pseudo element to generate an extra line can still be usefull. For really old browser (IE5) , turn the pseudo into a tag (span), technic is quiet old but still efficient where flexis not avalaible.
对于信息和旧浏览器，text-align:justify+ 生成额外行的伪元素仍然很有用。对于非常旧的浏览器（IE5），将伪代码转换为标签（跨度），技术很旧但在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>