Bagaimana untuk Menjajarkan Teks ke Kanan dengan Jarak Titik Seragam menggunakan CSS Mudah?

Mewajarkan Teks dengan Titik dalam CSS

Soalan: Bagaimanakah saya boleh menjajarkan teks ke kanan dengan jarak titik seragam menggunakan CSS mudah, seperti yang dilihat dalam contoh ini?

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

Jawapan: Untuk mencapai justifikasi ini, teknik yang menggunakan elemen pseudo :selepas biasanya digunakan:

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>

Penghadan:

• IE versi di bawah 8 tidak disokong.
• Kandungan tidak boleh termasuk entiti HTML, mengehadkan penggunaan aksara khas seperti ·. Walau bagaimanapun, aksara UTF-8 boleh memenuhi kebanyakan keperluan.

Atas ialah kandungan terperinci Bagaimana untuk Menjajarkan Teks ke Kanan dengan Jarak Titik Seragam menggunakan CSS Mudah?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!