Html 希望在CSS中对齐文本

我正试图找到这个问题的答案，但在搜索中没有找到任何答案。基本上，我的输出如下所示：

姓名：乔·史密斯

地址：缅因街555号

标题：厨师长兼洗瓶工

---

现在，它看起来不好，因为结果不一致。例如，“Joe”、“555”和“Chief”都应该左对齐，而不是简单地在冒号后面加一个空格。在CSS中实现这一点的最佳方法是什么？

有很多方法。这是一种方法

HTML

My Profile<br />
    <span class="label">Name</span><span class='values'>: Joe Smith</span><br />
    <span class="label">Address</span><span class='values'>: 555 Main Street</span><br />
    <span class="label">Title</span><span class='values'>: Chief cook and bottlewasher</span><br />

没有“最佳方法”，因为您可以通过多种方式实现这一点，但下面介绍如何使用

dl

、

dt

和

dd

HTML

<dl>
    <dt>Name</dt>
    <dd>Joe Smith</dd>
    <dt>Address</dt>
    <dd>55 Main Street</dd>
    <dt>Title</dt>
    <dd>Chief cook and bottlewasher</dd>
</dl>

---

表如果是表格数据，则使用单独的容器来存储这两种数据，谢谢。这就是我要找的。我总是在问之前先搜索，但出于某种原因，在没有实际演示的情况下，我就是想不出我要找的东西的名称！

<dl>
    <dt>Name</dt>
    <dd>Joe Smith</dd>
    <dt>Address</dt>
    <dd>55 Main Street</dd>
    <dt>Title</dt>
    <dd>Chief cook and bottlewasher</dd>
</dl>

dt {
    display:inline-block;
    width: 50px /* Set the width of the first column here */
}
dd {
    display:inline
}
dd::after {
    content:'\A';
    white-space:pre
}