html - 如何避免表格或其他技巧将文本与 HTML 5 中的选项卡对齐？

Question

有什么方法可以像我们使用没有表格或黑客的标签一样对齐文本？

例如这个：

Name: John
Lastname: Doe

输出如下：

标签： htmlcss

Answer 1

你可以使用css grid来实现这一点。

.main {
    display: grid;
    grid-template-columns: 100px 1fr;
    grid-column-gap : 15px;
    grid-row-gap: 15px;
}

<div class="main">
  <div> Name:  </div>
  <div> John </div>
  <div> Last Name: </div>
  <div> Doe </div>
</div>