CSS如何在前一个元素断行时对齐文本

Question

因此，我试图将一些数字对齐到同一行，但是由于断字，上一行由于无法将它们全部对齐。

我尝试过的位置是：绝对，但我也想在屏幕较小的浏览器中使用它，是否有办法解决？

我正在处理的问题

代码的结构方式是这样的

<h5>Header</h5>
    <div class = "row">
        <div class = "column">
            <label>Planned</label>
            <a href="">10</a>
        <div>
        <div class = "column">
            <label>Bought</label>
            <a href="">12</a>
        <div>
        ...

Answer 1

使用flexbox，最好使用span比label更好，除非采用形式。

.row {
  display: flex; /* flex row */
  width: 200px; /* example */
}

.column {
  flex: 1; /* grow */
  display: flex; /* flex */
  flex-direction: column; /* column */
  justify-content: space-between; /* push items */
}

<div class="row">
  <div class="column">
    <span>Planned</span>
    <a href="">10</a>
  </div>
  <div class="column">
    <span>Planned Planned</span>
    <a href="">10</a>
  </div>
  <div class="column">
    <span>Planned Planned Planned</span>
    <a href="">10</a>
  </div>
</div>