layout - 如何控制具有不同字体大小的非块级元素之间的行高？

Question

我有一个布局，我需要控制包装的非块级元素之间的行高：

<p class="payments"><small class="light">You Pay</small><abbr title="GBP">£</abbr>121.50<br><small>per month</small></p>

我想要实现的是：

我不想依赖绝对定位，因为下面会有元素需要清除它，只需在段落上设置低行高会导致对象脱离其框，请参见下面的小提琴：

http://jsfiddle.net/mdHKy/2/

有任何想法吗？

Answer 1

您可以先给出paheight然后将其设置line-height为该数量的一半（即 2 行）。

p.payments {
    line-height: 1em;
    height:2em;
}

然后将line-heightof设置small为1em并给出 a vertical-align：

p.payments small {
    line-height:1em;
    vertical-align:top;
}

然后设置vertical-align你的.light：

p.payments small.light {
    vertical-align:baseline;
}

JSFiddle 示例。