☰

CSS の span 内の固定幅 質問する

tag-icon • tag-icon html css
CSS の span 内の固定幅 質問する

順序なしリスト内:

<li><span></span> The lazy dog.</li>
<li><span>AND</span> The lazy cat.</li>
<li><span>OR</span> The active goldfish.</li>

クラスまたはスタイル属性の追加は許可されていますが、テキストのパディングやタグの追加または変更は許可されていません。

このページは Courier New でレンダリングされています。

目標は、span の後のテキストを揃えることです。

    The lazy dog.
AND The lazy cat.
OR  The active goldfish.

「OR」の正当性は重要ではありません。

怠惰な動物のテキストは追加の要素で囲まれている可能性がありますが、もう一度確認する必要があります。

ベストアンサー1

理想的には、次のCSSを使用するだけでこれを実現できます。

<style type="text/css">

span {
  display: inline-block;
  width: 50px;
}

</style>

これは、FF2 以下を除くすべてのブラウザで動作します。

Firefox 2 以前ではこの値はサポートされていません。-moz-inline-box を使用できますが、inline-block と同じではないため、状況によっては期待どおりに動作しない可能性があることに注意してください。

引用元癖モード

おすすめ記事