如何用HTML+CSS实现垂直评分量表首尾项旁的文本对齐

1-10数值评分量表实现方案 #

最优实现（Flex+定位） #

该方案语义性优于table实现，不会破坏原有评分项的交互效果，可实现说明文本与1、10的精准对齐。

HTML代码

<div class="rate-container">
  <div class="rate-items">
    <a class="rate">1</a>
    <a class="rate">2</a>
    <a class="rate">3</a>
    <a class="rate">4</a>
    <a class="rate">5</a>
    <a class="rate">6</a>
    <a class="rate">7</a>
    <a class="rate">8</a>
    <a class="rate">9</a>
    <a class="rate">10</a>
  </div>
  <p class="desc desc-left">极不可能</p>
  <p class="desc desc-right">极有可能</p>
</div>

CSS代码

/* 容器基础样式 */
.rate-container {
  position: relative;
  display: inline-block;
}
/* 评分数字容器 */
.rate-items {
  display: flex;
  gap: 12px;
}
/* 单个评分数字样式 */
.rate {
  width: 24px;
  text-align: center;
  line-height: 24px;
  /* 原有rate类的自定义样式可直接追加在此处 */
}
/* 说明文本公共样式 */
.desc {
  position: absolute;
  top: 0;
  margin: 0;
  line-height: 24px;
}
/* 左侧说明：对齐数字1的右侧 */
.desc-left {
  left: calc(24px + 12px);
}
/* 右侧说明：对齐数字10的右侧 */
.desc-right {
  left: calc(10 * 24px + 10 * 12px);
}

适配调整说明 #

• 数字间距、单个数字宽度可按需求调整，对应修改.rate-items的gap值、.rate的width值，同时同步修改.desc-left和.desc-right的calc计算参数即可
• 若需将说明文本放在数字下方，只需将.desc的top属性修改为100%，再追加margin-top调整上下间距即可
• 若不需要固定数字宽度，可改用CSS Grid布局，将10个数字和两个说明文本按列排布，说明文本分别放在第2列和第12列，对齐精度更高

内容的提问来源于stack exchange，提问作者J Gustavo Munoz