我有这个div:
<div id="barraLinhas">
<img onclick="linhaAzul()" src="Linha_Azul.png" value="Linha Azul" />
<img onclick="linhaAmarela()" src="Linha_Amarela.png" value="Linha Amarela" />
<img onclick="linhaVerde()" src="Linha_Verde.png" value="Linha Verde" />
<img onclick="linhaVermelha()" src="Linha_Vermelha.png" value="Linha Vermelha" />
</div>
这个CSS:
#barraLinhas {
width: 950px;
height: 50px;
margin-bottom: 10px;
}
我希望这些图像之间有空格,但我很难这样做(这可能很愚蠢......我只是愚蠢)。
编辑:或者甚至将它们间隔在那些950px
中答案 0 :(得分:2)
由于您需要它们之间的空间,如果当前图像之后只有图像,您可以使用+
兄弟选择器来定位图像边距。
#barraLinhas {
width: 950px;
height: 50px;
margin-bottom: 10px;
}
#barraLinhas img + img {
margin-left: 15px;
}
<div id="barraLinhas">
<img onclick="linhaAzul()" src="http://placehold.it/100x100" value="Linha Azul" />
<img onclick="linhaAmarela()" src="http://placehold.it/100x100" value="Linha Amarela" />
<img onclick="linhaVerde()" src="http://placehold.it/100x100" value="Linha Verde" />
<img onclick="linhaVermelha()" src="http://placehold.it/100x100" value="Linha Vermelha" />
</div>
答案 1 :(得分:0)
添加此css
#barraLinhas img{
float: left;
margin-right: 10px;
}
这将把它们从左到右置于barraLinhas之下,它们之间有10px的空间
答案 2 :(得分:0)
您可以使用flexbox:
#barraLinhas {
display: flex;
justify-content: space-between;
}
#barraLinhas {
width: 950px;
height: 50px;
margin-bottom: 10px;
display: flex;
justify-content: space-between;
}
&#13;
<div id="barraLinhas">
<img src="http://placehold.it/100x100" alt="Linha Azul" />
<img src="http://placehold.it/100x100" alt="Linha Amarela" />
<img src="http://placehold.it/100x100" alt="Linha Verde" />
<img src="http://placehold.it/100x100" alt="Linha Vermelha" />
</div>
&#13;
答案 3 :(得分:0)
答案 4 :(得分:0)
试
#barraLinhas img:not(:first-child){
margin-left: 5px;
}
或
#barraLinhas img:nth-child(n+2){
margin-left: 5px;
}