1

我无法让较小的（上标）内联元素与另一个内联元素对齐。

基本上 em 元素（包含单词 'USD'）应该与内联文本（包含单词 ABC）对齐，因此两个单词的顶部都在同一行。

对我来说，使用下面的代码，即使我将行高设置为 35px，USD 字样也会上升一半；

任何想法我做错了什么？

谢谢，

克里斯

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.plan-types-pricing
{
    font-size: 35px;
    line-height: 35px;
}

.plan-types-pricing strong
{
    display: block;
}

.plan-types-pricing em
{
    font-size:12px;
    vertical-align: top;
    line-height: 35px;
}

.plan-types-pricing small
{
    font-size: 12px;
    vertical-align: baseline;
}

</style>
</head>
<body>
    <span class="plan-types-pricing">
        <strong>Starting at</strong>
        <em>USD</em>
        ABC
        <small>/month</small>
    </span>
</body>
</html>
4

1 回答 1

1

的 line-height.plan-types-pricing em应该是所需的高度 - 字体大小 (35 - 12 = 23) 所以将line-heightof设置em为23px.

.plan-types-pricing em
{
    line-height: 23px;
    font-size: 12px;
    vertical-align: top;
}
于 2012-05-03T11:03:15.660 回答