text - 如何在冒号后对齐文本

Question

我想在每行的冒号后对齐几行文本，所以它目前看起来像:

您的成员(member)号是:123456789
您访问网站的临时密码是:1234

我希望它看起来像:

您的成员(member)编号是: 123456789
您访问网站的临时 PIN 码是: 1234

是否可以不使用表格来做到这一点？

亲切的问候

Answer 1

你可以像这样用 HTML 来做:

<div>
    <span class="col1">Your Membership Number is:</span>
    <span>123456789</span>
</div>
<div>
    <span class="col1">Your temporary PIN for website access is:</span>
    <span>1234</span>
</div>  

和这样的CSS:

.col1 {
width: 300px;
float: left;
}