3

HTML の文字を隣の文字の上に揃えたい。css vertical-align 属性が必要なようですが、問題が発生しています。

を使用vertical-align: text-topしても、私が望んでいるようには見えませんが、仕様を読んでそうすべきだと思いました。

現在、私はvertical-align: 10%合理的な解決策であるこれを使用していますが、正しく見えるようにするために各プラットフォームで適切な数を計算する必要があります。おそらく正しいと思われる値に設定するブラウザ検出は、間違った解決策のようです。

4

4 に答える 4

2

これらのアイデアのいくつかは正しい方向に進んでいますが、どれもうまくいきません。結局、Josh Stodolaの提案とtext-transform: uppercase;、テーブルの使用が不要な場合でも、小さいフォントで大文字を使用して疑似スモールキャップを使用するというKeltexの提案を組み合わせることになりました。

それでもフォントサイズと行の高さをいじくり回すことに依存していますが、少なくともこの方法でより一貫した効果を得ることができます。

とにかくすべてのスタイルをオーバーライドする必要があるため、使用する提案<sup>は実際には役に立ちません。したがって、とは異なりません<span>。意味的には違いがあるかもしれませんが、それが問題にならないほど小さいです。

于 2010-02-21T07:23:11.713 に答える
2

<sup>タグをつけてみてください。それはあなたがやろうとしていることを正確に意味しています。実装後は、css でさらに制御できます。

例：M<sup>c</sup>Phe収量 M c Phe

http://www.w3schools.com/TAGS/tag_sup.asp

「c」が小さすぎる場合は、<style> sup { font-size: 9pt } </style>またはそのようなことを行ってください。

于 2010-02-20T00:31:02.113 に答える
1

質問に対するAnthonyのコメントは、「c」を意味的に正しい<sup>タグでラップし（または、引き続き a を使用できると思います<span>）、その上でCSSを使用するというアイデアを私に与えてくれtext-transform: uppercase;ました。

于 2010-02-20T01:07:25.743 に答える
0

見苦しいですが、表のセルを使用できます。

最初にいくつかのスタイルを定義します。

.bigletter
{
  font-size:20px;
  line-height:20px;
}
.upletter
{
  font-size:14px;
  line-height:14px;
  vertical-align:top;
}
.downletter
{
  font-size:14px;
  line-height:14px;
  vertical-align:bottom;
}

次に、html:

<tr>
  <td class='bigletter'>M</td>
  <td class='upletter'>C</td>
  <td class='bigletter'>P</td>
  <td class='downletter'>hexxx</td>
</tr>
于 2010-02-20T00:41:45.497 に答える