没问题！我帮你整理了两种规范的方案来实现X堆叠在Y上方的分数形式，同时调整你的HTML结构使其更合理：

方法1：纯HTML快速实现（适合简单场景） #

利用HTML原生的上标(<sup>)和下标(<sub>)标签，快速模拟分数效果：

<div>
  <div class="question-group">
    <h4>Question</h4>
    <span class="fraction">
      <sup>X</sup>
      <span>/</span>
      <sub>Y</sub>
    </span>
  </div>
  <button>Answer 1</button>
  <button>Answer 2</button>
  <button>Answer 3</button>
</div>

说明：把X和Y替换成实际的0-100数字即可，这种方式无需额外CSS，适合对视觉要求不高的场景。

方法2：CSS美化实现（视觉更标准） #

如果想要更接近真实印刷体的分数样式，用CSS来控制布局和样式会更理想：

HTML结构修改 #

<div>
  <div class="question-section">
    <p>Question</p>
    <div class="fraction">
      <span class="numerator">X</span>
      <span class="divider"></span>
      <span class="denominator">Y</span>
    </div>
  </div>
  <button>Answer 1</button>
  <button>Answer 2</button>
  <button>Answer 3</button>
</div>

配套CSS样式 #

/* 让问题和分数横向对齐（可选） */
.question-section {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

/* 分数容器 */
.fraction {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}

/* 分子和分母的字体大小 */
.numerator, .denominator {
  font-size: 0.75em;
}

/* 分数线样式 */
.divider {
  width: 100%;
  border-top: 1px solid #000;
  margin: 2px 0;
}

说明：这种方案可以自定义分数线的粗细、颜色，以及分子分母的字体大小，视觉效果更专业，同时结构语义更清晰。

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