Vuetify3：如何在<v-list-item>中左对齐文本右对齐按钮

解决方案 #

使用Vuetify内置的v-list-item-content和v-list-item-action组件构建列表项结构，这是Vuetify列表的标准布局方式，能自动实现文本左对齐、按钮右对齐的效果。

修正后的代码 #

<template>
  <v-app>
    <v-container>
      <v-list>
        <v-list-item
          v-for="(word, index) in words"
          :key="index"
        >
          <!-- 文本内容区域，默认左对齐 -->
          <v-list-item-content>
            <v-list-item-title>{{ word }}</v-list-item-title>
          </v-list-item-content>
          <!-- 操作按钮区域，默认右对齐 -->
          <v-list-item-action>
            <v-btn size="20" icon color="red lighten-3">
              <v-icon size="20">mdi-minus</v-icon>
            </v-btn>
          </v-list-item-action>
        </v-list-item>
      </v-list>
    </v-container>
  </v-app>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const words = ref(["one", "two", "three"]);
</script>

问题原因说明 #

原代码直接在v-list-item内放置自定义div和按钮，未遵循Vuetify列表项的内部结构规范，导致flex布局未正确生效，按钮被挤到文本下方。v-list-item-content和v-list-item-action是Vuetify为列表项预设的布局组件，前者承载主要内容，后者放置操作控件，二者配合会自动处理对齐和排版，无需额外添加flex类。

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