Vue.js(Vuetify)列表项对齐问题：如何包裹div并保持最右列对齐？

我正在使用Vue.js及其UI组件框架Vuetify，目前遇到数字（如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>

Vuetify的v-list-item本身基于flex布局，额外嵌套div反而会打乱原生对齐逻辑，调整方式如下：

1. 简化布局层级，利用flex工具类对齐
   移除多余的div嵌套，直接在v-list-item下排列元素，通过Vuetify内置的flex类实现垂直居中：

   <v-list-item
     v-for="result in results"
     :key="result.id"
     class="grey lighten-3 mb-1 align-center"
   >
     <!-- 左侧时间内容 -->
     <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-if="$vuetify.breakpoint.smAndUp" class="d-flex align-center px-2">
       <span class="mr-1">{{ $n(result.used) }}</span>
       <v-icon size="20">mdi-arrow-right-bold</v-icon>
     </div>
   
     <!-- 右侧点数，靠右对齐保持列整齐 -->
     <div class="px-2 text-right">
       <v-list-item-title>{{ $n(result.point) }}</v-list-item-title>
     </div>
   </v-list-item>
   

2. 关键类说明

   • align-center：给v-list-item添加，让所有子元素垂直居中，解决整体对齐问题
   • d-flex align-center：给中间的数字+图标容器添加，确保数字和图标自身垂直对齐
   • text-right：给右侧点数容器添加，让数字靠右排列，保持列的整齐性

3. 原代码问题根源
   原代码用div包裹v-list-item-content，而v-list-item-content本身是block元素，会占据整行宽度，破坏了v-list-item的flex布局，导致元素无法横向对齐。去掉多余嵌套后，flex布局才能正常工作。

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