如何在HTML中添加空格实现书籍列表每行内容垂直对齐

你现在用 加空格的方式没法对齐，核心原因是每一列的文本长度不固定，文本本身占据的宽度差异没法靠追加固定数量的空格补齐，自然会出现纵向错位的情况，推荐用以下方案实现需求：

方案1：用HTML表格实现（最推荐，语义匹配、实现成本最低） #

表格天生就是为结构化列表排版设计的，自带对齐效果，后续加分类、调整列宽也非常方便，代码示例如下：

<table>
  <tr>
    <th>序号</th>
    <th>书名</th>
    <th>作者</th>
    <th>出版时间</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Jacob's Book</td>
    <td>Jacob</td>
    <td>2021</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Anne-Marianne' Cooking Book</td>
    <td>Anne-Marianne</td>
    <td>2021</td>
  </tr>
  <tr>
    <td>3</td>
    <td>Ole's Car Book</td>
    <td>Ole</td>
    <td>2021</td>
  </tr>
  <tr>
    <td>4</td>
    <td>Frederikke's Kitchen Book</td>
    <td>Frederikke</td>
    <td>2021</td>
  </tr>
</table>

如果需要调整列宽，直接给<th>标签加width属性或者自定义CSS样式即可。

方案2：用CSS固定列宽实现（不想用表格的场景） #

如果确实不想用表格标签，可以给每列内容套上独立标签，统一设置固定宽度实现对齐，代码示例如下：

<style>
  .book-row span {
    display: inline-block;
  }
  .col-num { width: 60px; }
  .col-name { width: 280px; }
  .col-author { width: 160px; }
  .col-release { width: 80px; }
</style>
<div class="book-row">
  <span class="col-num">序号</span>
  <span class="col-name">书名</span>
  <span class="col-author">作者</span>
  <span class="col-release">出版时间</span>
</div>
<div class="book-row">
  <span class="col-num">1</span>
  <span class="col-name">Jacob's Book</span>
  <span class="col-author">Jacob</span>
  <span class="col-release">2021</span>
</div>
<!-- 其余行按相同结构补充即可 -->

方案3：用Markdown表格实现（内容在Markdown环境编写的场景） #

如果是在Markdown文档里做这个清单，直接用Markdown表格语法即可：

| 序号 | 书名 | 作者 | 出版时间 |
| ---- | ---- | ---- | -------- |
| 1 | Jacob's Book | Jacob | 2021 |
| 2 | Anne-Marianne' Cooking Book | Anne-Marianne | 2021 |
| 3 | Ole's Car Book | Ole | 2021 |
| 4 | Frederikke's Kitchen Book | Frederikke | 2021 |

内容的提问来源于stack exchange，提问作者TheKingZ