我有以下代码:
<div>
<span class='foo' style='font-size: 10px'>Foo</span>
<span class='blah' style='font-size: 25px'>Blah</span>
</div>
我想顶部对齐它们。目前,Foo 没有顶部对齐,因为 Blah 的字体更大。我该如何解决这个问题?
这是一个codepen
最佳答案
您可以使用
span {
vertical-align: top;
}
如您所见,使用绿色背景,两个 div 都使用它们的顶 Angular 对齐。如果你想做进一步的对齐,你可以添加 display: inline-block
,来风格化它们并添加填充:
span {
vertical-align: top;
display: inline-block;
}
span.foo {
margin-top: 3px;
}
这次它们看起来像是顶部对齐(即使第一个实际上在第二个下方)。
关于html - 顶部对齐两个具有不同字体大小的跨度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31228464/