html - 如何在带有或不带有 Bootstrap 的 HTML 中显示字符 ":"前后对齐的单词？

Question

我想知道是否可以在 HTML 中以相同的距离在“:”之后显示一个字符串。例如，我有以下字符串:名字:Josh 和时间:12:12:01。我想将它们显示在屏幕中央并在“:”之后我想像下面的代码一样显示第二部分......这可能吗？

<div>Lastname: Josh</div>

<div>Time:     12:12:01</div>

我的问题是 Time 不完全在 Lastname 之下( T 正好在 L 之下)而且我不知道 Josh 的 J 如何能在与 1 of 12:12:01 的 1 相同的高度显示

Answer 1

dt {
  display: inline;
  
}
dd {
    margin-left: 80px;
    margin-top: -18px;
}

<dl>
<dt>Last Name:</dt><dd>Josh</dd>
<dt>Time:</dt><dd>12:12:01</dd>
</dl>

这非常粗略，但您会看到，使用 dl 时，列表中的每个元素都明确包含两种元素。您可以分别设置每个部分的样式。您应该能够按照自己的意愿完成这项工作。