CSS结合Bootstrap实现列内数值数位对齐 整体右对齐

核心逻辑是给所有数值列设置统一的固定最小宽度，保证数值容器尺寸一致，结合右对齐实现数位垂直对齐，外层容器控制整体组靠右对齐。

修改后代码 #

HTML #

<!-- 外层父容器控制所有行整体靠右对齐 -->
<div class="d-flex flex-column align-items-end">
  <div class="d-flex">
    <p class="table-string">91.86</p>
    <span class="ml-2">(+61%)</span>
  </div>
  <div class="d-flex">
    <p class="table-string">108.15</p>
    <span class="ml-2">(+108%)</span>
  </div>
  <div class="d-flex">
    <p class="table-string">329.93</p>
    <span class="ml-2">(+593%)</span>
  </div>
</div>

CSS #

.table-string {
  /* 可根据实际最长数值调整宽度，保证能放下最长数值即可 */
  min-width: 70px;
  text-align: end;
  /* 清除p标签默认外边距避免行错位 */
  margin: 0;
}

说明 #

1. 外层align-items-end保证每一行的「数值+百分比」整体在父容器末端对齐
2. 数值列统一设置min-width后，所有数值容器宽度一致，右对齐后自然实现百位、十位、个位垂直对应
3. 如果后续数值长度有变化，只需要调整min-width的数值适配即可

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