如何让<code>No</code>与<code>Expiry Date</code>后的<code>:</code>对齐且无需手动加空格

不需要手动添加空格，根据你使用的场景选择对应方法即可：

1. HTML/CSS网页场景 #

推荐用弹性盒（Flex）或网格（Grid）布局实现：

Flex方案代码 #

<style>
/* 每组标签+值的容器 */
.label-item {
  display: flex;
  margin: 6px 0;
}
/* 标签文本公共样式 */
.label-item .label {
  min-width: 110px;
  text-align: left;
}
</style>

<div class="label-item">
  <span class="label">No</span>:
  <span class="value">自定义内容</span>
</div>
<div class="label-item">
  <span class="label">Expiry Date</span>:
  <span class="value">2025-12-31</span>
</div>

所有标签会自动占满你设置的最小宽度，冒号自然对齐。如果需要适配最长标签的宽度，改用Grid布局即可：

Grid方案代码 #

<style>
.container {
  display: grid;
  /* 第一列宽度自动匹配最长标签，第二列占剩余空间 */
  grid-template-columns: auto 1fr;
  gap: 6px 8px;
}
</style>
<div class="container">
  <span>No</span>: <span>自定义内容</span>
  <span>Expiry Date</span>: <span>2025-12-31</span>
</div>

2. Markdown文档场景 #

直接用表格实现对齐，不需要手动调整空格：

| 标签名       |       | 内容         |
|--------------|-------|--------------|
| No           | :     | 自定义内容   |
| Expiry Date  | :     | 2025-12-31   |

如果不需要显示表格边框，可以对应调整渲染平台的表格样式配置。

3. 纯文本/控制台输出场景 #

用编程语言的格式化输出语法，指定标签的占位宽度即可：

Python示例 #

data = [("No", "自定义内容"), ("Expiry Date", "2025-12-31")]
# 标签部分占位15字符，左对齐
for label, val in data:
    print(f"{label:<15}: {val}")

Shell示例 #

printf "%-15s: %s\n" "No" "自定义内容"
printf "%-15s: %s\n" "Expiry Date" "2025-12-31"

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