html - CSS 如何在前面的元素有分词符时对齐文本

Question

所以我试图将一些数字对齐到同一行，但是前一行，因为断字，我无法让它们全部对齐。

我试过 position: absolute 但我也想让它在小屏幕浏览器上工作，有没有办法解决这个问题？

我正在处理的问题

代码的结构是这样的

<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>