[英]Vertical alignment of empty inline-block elements
考虑以下 html/css:
<style>
span
{
display:inline-block;
width:5em;
height:5em;
padding:1em;
}
</style>
a
<span style="background-color:blue;">b</span>
<span style="background-color:green;"></span>
<span style="background-color:red;">c</span>
d
蓝色和红色框以及框内部和周围的文本水平排列。 空的绿色框没有; 它出现在其他两个框的上方。 如果我在绿色框中添加一些文本,这种行为就会停止,一切都按照我想要的方式排列。
这在 IE8(标准模式)、FireFox 3.0 和 Chrome 中一直发生,所以我假设有一些我不理解的空内联块元素的属性。
我可以通过指定 vertical-align 属性使框对齐,但是四个文本值不再对齐。 有什么想法吗? 我被这个难住了。
将跨度顶部对齐然后负边距等于您的填充,并且您不需要不间断的空格破解。
span
{
display:inline-block;
width:5em;
height:5em;
padding:1em;
vertical-align:top;
margin-top: -1em;
}
a
<span style="background-color:blue;">b</span>
<span style="background-color:green;"></span>
<span style="background-color:red;">c</span>
d
尝试添加
在绿色跨度内。
a
<span style="background-color:blue;">b</span>
<span style="background-color:green;"> </span>
<span style="background-color:red;">c</span>
d
以防万一仍然可以帮助某人,另一种解决方案,强制从 CSS 中留出一些空间:
span:empty:before {
content: "\0020";
display: inline-block;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.