html - 上付き文字を含むリスト内のテキストを垂直方向に揃える方法は?

Question

上付き文字を含むアイテムのリスト内のテキストを、メインテキストが垂直方向に等間隔になるように揃えたい:

HTML:

<ul>
 <li>Shape: Rectangle</li>
 <li>Length: 5m</li>
 <li>Breadth: 3m</li>
 <li>Area: 15m<sup>2</sup></li>
 <li>Color: Blue</li>
</ul>

displayCSS の、height、line-heightおよびvertical-alignプロパティをいじってみました。しかし、どれも機能していないようです。誰でも私を助けてもらえますか？ありがとう。

Answer 1

この問題の原因は、上付き文字が行間隔を不均一にする傾向があることです。line-height1.3 のような十分に大きな値に設定すると役立つ場合があります。ただし、一般的には、要素の使用を避けsup、独自の上付き要素spanを作成し、相対的な配置を使用して上付き文字を作成する と スタイルを使用することをお勧めします (これは、 による垂直方向の配置とは異なり、行間隔には影響しませんsup)。

この特定のケースでは、はるかに単純で優れたアプローチがあります。 の代わりに<sup>2</sup>、 を使用する²か、上付き文字の 2 文字「²」を直接入力します (Windows では、Alt 0178 を使用して実行できます)。通常の文字なので行間にも影響せず、タイポグラファーによってデザインされているため、HTML や CSS で作成されたどの上付き文字 2 よりも見栄えがよくなることが期待できます。

Answer 2

<sup>形式によっては、タグを呼び出す直前にフォント サイズを小さくしてみることができます。

... <br/><li>面積: 15m<font

size=-1>²</font></li>

...<p/>

まだ少し隙間がありますが、気になるほどで​​はありません。