空内联块元素的垂直对齐
考虑以下 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 中一致发生,因此我假设空内联块元素有一些我不理解的属性。
我可以通过指定垂直对齐属性使框对齐,但四个文本值不再对齐。有什么想法吗?我被这个难住了。
Consider the following 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
The blue and red boxes, plus the text both inside and surrounding the boxes lines up horizontally. The empty green box does not; it appears above the other two boxes. If I add some text to the green box, this behavior stops and everything lines up the way I want it to.
This happens consistently in IE8 (standards mode), FireFox 3.0 and Chrome, so I'm assuming there is some property of empty inline-block elements that I don't understand.
I can make the boxes line up by specifying a vertical-align property, but then the four text values are no longer aligned. Any thoughts? I'm stumped on this one.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(4)
给跨度顶部对齐,然后负边距等于您的填充,并且您不需要不间断的空格黑客。
Give the span top alignment then negative margin equal to your padding, and you don't need the non-breaking space hack.
以防万一仍然可以帮助某人,另一个解决方案,强制从 CSS 中留出一些空间:
Just in case still helps someone, another solution, enforcing to have some space from CSS:
尝试在绿色范围内添加
。
Try adding
inside of the green colored span.