如何用HTML和CSS实现题号按末尾字母对齐的试题排版？

把题号和试题内容放在独立容器里是最优方案，能完全解决你遇到的对齐问题，下面是具体实现方法：

核心思路 #

将每个试题拆分为「题号容器」和「内容容器」，通过CSS控制题号容器的宽度和对齐方式，保证罗马数字（I、II、III、IV）的末尾字母对齐，同时不影响试题内容的排版。

代码示例 #

HTML结构 #

<div class="question">
  <span class="q-num">I</span>
  <span class="q-text">Statement 1</span>
</div>
<div class="question">
  <span class="q-num">II</span>
  <span class="q-text">Statement 2</span>
</div>
<div class="question">
  <span class="q-num">III</span>
  <span class="q-text">Statement 3</span>
</div>
<div class="question">
  <span class="q-num">IV</span>
  <span class="q-text">Statement 4</span>
</div>

CSS样式 #

/* 每个试题的外层容器，用flex实现横向排列 */
.question {
  display: flex;
  align-items: center;
  margin: 10px 0; /* 试题之间的垂直间距，可自定义 */
}

/* 题号容器：固定宽度+右对齐，实现末尾字母对齐 */
.q-num {
  width: 35px; /* 可根据最长题号（比如VIII、X）调整宽度 */
  text-align: right;
  font-weight: bold; /* 对应你之前的加粗需求 */
  margin-right: 15px; /* 题号与内容的间距，可自定义 */
}

/* 内容容器：占满剩余宽度，自动换行 */
.q-text {
  flex: 1;
  line-height: 1.5; /* 优化多行内容的可读性 */
}

为什么这个方案更好？ #

1. 彻底解决对齐问题：固定宽度的题号容器+右对齐，不管罗马数字长度如何，末尾字母都会精准对齐，完全符合你要的效果。
2. 样式互不干扰：题号和内容的样式独立控制，不会像text-align-last那样影响整行内容。
3. 扩展性强：后续要调整间距、字号、加粗样式，或者添加更多题号（比如V、VI），直接修改CSS参数即可，不需要改动HTML结构。

如果你习惯用Grid布局，也可以替换成以下CSS，效果一致：

.question {
  display: grid;
  grid-template-columns: 35px 1fr;
  gap: 15px; /* 题号与内容的间距 */
  align-items: center;
  margin: 10px 0;
}

.q-num {
  text-align: right;
  font-weight: bold;
}

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