シンプルな CSS を使用して均一なドット間隔でテキストを右揃えにする方法

CSS でドットを使用してテキストを揃える

質問: 示されているように、単純な CSS を使用して、均一なドット間隔でテキストを右揃えにするにはどうすればよいですか?この例では?

Drug 1 ............  10ml
Another drug ......  50ml
Third ............. 100ml

回答: この正当化を実現するには、:after 疑似要素を利用する手法が一般的に使用されます:

CSS:

dl { width: 400px }
dt { float: left; width: 300px; overflow: hidden; white-space: nowrap }
dd { float: left; width: 100px; overflow: hidden }

dt:after { content: " .................................................................................." }

HTML:

<dl>

    <dt>Drug 1</dt>
    <dd>10ml</dd>

    <dt>Another drug</dt>
    <dd>50ml</dd>

    <dt>Third</dt>
    <dd>100ml</dd>


</dl>

制限事項:

• IE バージョン 8 未満
• コンテンツには HTML エンティティを含めることはできず、· などの特殊文字の使用は制限されます。ただし、UTF-8 文字はほとんどのニーズを満たすことができます。

以上がシンプルな CSS を使用して均一なドット間隔でテキストを右揃えにする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。