Vuetify技术问题：如何将v-btn按钮向右对齐？

你当前的问题出在把删除按钮放在了prepend插槽里——这个插槽的内容默认靠左排列，而且自定义的.align-end样式受限于插槽的布局规则，无法生效。下面给你两种可行的解决方法：

方法一：使用append插槽（推荐） #

Vuetify的v-list-item专门提供了append插槽，用来放置需要靠右对齐的操作元素，直接把删除按钮移到这个插槽里就能自动靠右，不需要额外自定义样式：

修改后的模板代码片段：

<v-list-item
  @click="doneTask(task.id)"
  :class="{ 'bg-color' : task.done }"
>
  <template v-slot:prepend="{ isActive }">
    <v-list-item-action>
      <v-checkbox-btn :model-value="task.done"></v-checkbox-btn>
    </v-list-item-action>
    <v-list-item-title :class="{ 'task-complete' : task.done }">{{ task.title }}</v-list-item-title>
  </template>
  <!-- 将删除按钮移至append插槽 -->
  <template v-slot:append>
    <v-list-item-action>
      <v-btn
        @click.stop="deleteTask(task.id)"
        icon flat>
        <v-icon color="primary lighten-1">mdi-delete</v-icon>
      </v-btn>
    </v-list-item-action>
  </template>
</v-list-item>

方法二：调整prepend插槽的布局样式 #

如果一定要保留在prepend插槽里，可以给插槽容器添加flex布局类，让内容两端对齐：

修改后的模板代码片段：

<v-list-item
  @click="doneTask(task.id)"
  :class="{ 'bg-color' : task.done }"
>
  <!-- 给prepend插槽添加flex布局类，占满整个宽度 -->
  <template v-slot:prepend="{ isActive }" class="d-flex justify-content-between w-100">
    <div class="d-flex align-center">
      <v-list-item-action>
        <v-checkbox-btn :model-value="task.done"></v-checkbox-btn>
      </v-list-item-action>
      <v-list-item-title :class="{ 'task-complete' : task.done }">{{ task.title }}</v-list-item-title>
    </div>
    <v-list-item-action>
      <v-btn
        @click.stop="deleteTask(task.id)"
        icon flat>
        <v-icon color="primary lighten-1">mdi-delete</v-icon>
      </v-btn>
    </v-list-item-action>
  </template>
</v-list-item>

这种方法可以移除你自定义的.align-end样式，因为通过justify-content-between已经实现了元素的靠右对齐。

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