如何使用简单的 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中文网其他相关文章！