我有几个相同的HTML元素相继出现:
<span>1</span>
<span>2</span>
<span>3</span>
我正在寻找使用CSS only在元素之间添加间距的最佳方法
[no space] [1] [space 10px] [2] [space 10px] [3] [no space]
此外:
的浏览器兼容性
更新
看起来我不太清楚。我不想使用任何额外的HTML标记,比如
<span></span> <span></span> <span class="last_span"></span>
我不想用桌子
我希望CSS自动针对第一个和最后一个跨度
我不想使用javascript
可选要求:最后一个跨度不能是父标签的最后一个子标签,但它将是父标签的最后一个跨度。跨度之间没有任何其他标记。
发布于 2011-11-19 00:04:02
这样做的一个好方法是:
span + span {
margin-left: 10px;
}
每个前面有span
的span
(因此,除了第一个span
之外的每个span
)都会有margin-left: 10px
。
这里有一个类似问题的更详细的答案:Separators between elements without hacks
发布于 2011-11-18 23:45:18
只需使用边距或填充即可。
在您的特定情况下,只能在第二个<span>
上使用margin:0 10px
。
更新
这里有一个很好的CSS3解决方案(jsFiddle):
span {
margin: 0 10px;
}
span:first-of-type {
margin-left: 0;
}
span:last-of-type {
margin-right: 0;
}
从Internet Explorer9开始,支持使用:nth-child()
、:last-child
、:first-of-type
等选择器进行高级元素选择。
发布于 2019-03-27 11:39:16
将这些规则添加到父容器中:
display: grid
grid-auto-flow: column
grid-column-gap: 10px
很好的参考:https://cssreference.io/
https://stackoverflow.com/questions/8184958
复制相似问题