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

の行の高さは.plan-types-pricing em、目的の高さ - フォント サイズ (35 - 12 = 23) にする必要があります。したがって、line-heightをに設定emし23pxます。

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