如何使用簡單的 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中文網其他相關文章！