「労働者が自分の仕事をうまくやりたいなら、まず自分の道具を研ぎ澄まさなければなりません。」 - 孔子、「論語。陸霊公」
表紙 > プログラミング > 単純なCSSを使用して均一なドット間隔でテキストを右に整列させる方法は?

単純なCSSを使用して均一なドット間隔でテキストを右に整列させる方法は?

2025-02-18に投稿されました
ブラウズ:323

How to Align Text to the Right with Uniform Dot Spacing using Simple CSS?

css

のドットを使用してテキストを正当化する質問:この例では?

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

回答:この正当化を達成するために、次のテクニック:pseudo-elementが一般的に採用されています:

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:

Drug 1
10ml
Another drug
50ml
Third
100ml

制限:

  • ieバージョンは8未満のバージョンがサポートされていません。 &Middotのような特殊文字の。ただし、UTF-8文字はほとんどのニーズを満たすことができます。
最新のチュートリアル もっと>

免責事項: 提供されるすべてのリソースの一部はインターネットからのものです。お客様の著作権またはその他の権利および利益の侵害がある場合は、詳細な理由を説明し、著作権または権利および利益の証拠を提出して、電子メール [email protected] に送信してください。 できるだけ早く対応させていただきます。

Copyright© 2022 湘ICP备2022001581号-3