如何通过将项目包装在 div 中来对齐项目，同时保持最右列的对齐？

Question

我正在使用 Vue.js，它是 Vue.js 的 UI 组件框架。目前，我遇到一个问题，无法对齐 500 或 5000 等数字，也无法对齐图标。最右列中的数字必须保留，因此我将它们包装在 div 中。我该如何解决？

<v-list-item
  v-for="result in results"
  :key="result.id"
  class="grey lighten-3 mb-1"
>
  <v-list-item-content class="my-1 px-2">
    <v-list-item-title>
      {{ $datetime(new Date(result.timestamp * 1000)) }}
    </v-list-item-title>
  </v-list-item-content>
  <div>
    <v-list-item-content
      v-if="$vuetify.breakpoint.smAndUp"
      class="my-1 px-2"
    >
      <v-list-item-title>
        {{ $n(result.used) }}
        <v-icon size="20">
          mdi-arrow-right-bold
        </v-icon>
      </v-list-item-title>
    </v-list-item-content>
  </div>
  <div>
    <v-list-item-content class="my-1 px-2">
      <v-list-item-title>
        {{ $n(result.point) }}
      </v-list-item-title>
    </v-list-item-content>
  </div>
</v-list-item>

Answer 1

这是一种使用

subgrid

跨深度嵌套元素对齐项目的方法。看看有没有帮助。

.entries {
  display: grid;
  grid-template-columns: 1fr repeat(3, auto);
  grid-auto-flow: row;
  gap: 10px;
}

.entries .entry {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  background-color: #ccc;
  padding: 10px;
}

.before {
  justify-self: end;
}

.after {
  justify-self: start;
}

<div class="entries">
  <div class="entry">
    <time>2024-04-17 12:12:23</time>
    <div class="before">500</div>
    <div class="arrow">👉🏻</div>
    <div class="after">5,000</div>
  </div>
  <div class="entry">
    <time>2024-04-17 12:13:23</time>
    <div class="before">500</div>
    <div class="arrow">👉🏻</div>
    <div class="after">5,000,000</div>
  </div>
  <div class="entry">
    <time>2024-04-17 12:14:23</time>
    <div class="before">500,000,000</div>
    <div class="arrow">👉🏻</div>
    <div class="after">500</div>
  </div>
  <div class="entry">
    <time>2024-04-17 12:15:23</time>
    <div class="before">500,000</div>
    <div class="arrow">👉🏻</div>
    <div class="after">1,500,000,000</div>
  </div>
</div>