vuetify 3：vuetify 中的文本（左）和按钮（右）对齐 <v-list-item>

Question

使用 Vue3/Vuetify3 我试图显示一个单词列表，每个单词旁边都有一个按钮。文本（单词）应在行中左对齐，按钮应右对齐。

我下面给出的简单（独立）示例演示了这个问题：按钮呈现在文本下方（而不是右侧）

<template>
  <v-app>
    <v-container>
      <v-list>
        <v-list-item
          v-for="(word, index) in words"
          :key="index"
          class="d-flex justify-space-between align-items-center"
        >
          <div class="flex-grow-1">{{ word }}</div>
          <!-- Button aligned to the right -->
          <v-btn size="20" icon color="red lighten-3">
            <v-icon size="20">mdi-minus</v-icon>
          </v-btn>
        </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>

如果有人可以提供帮助/建议，我将非常感激！

游乐场示例

Answer 1

可能有很多方法可以做到这一点。就我个人而言，我会使用 v-row 和 v-cols。

<v-row>
  <v-col>
    <div>{{ word }}</div>
  </v-col>
  <v-col>
    <v-btn
      size="20"
      icon
      color="red lighten-3"
    >
      <v-icon size="20">
        mdi-minus
      </v-icon>
    </v-btn>
  </v-col>
 </v-row>

我还添加了一些随机宽度。 其他人可能会提出更好的建议，希望有帮助。

游乐场