Vuetify如何将v-card-actions置于卡片右侧而非默认底部？

你可以通过两种方式调整v-card-actions的位置，以下是具体实现：

方法一：利用Vuetify内置flex布局类 #

直接通过Vuetify的布局类修改卡片内部的排列方式，无需自定义CSS：

<template>
  <v-card max-width="600" class="d-flex flex-row">
    <!-- 卡片主体内容，占据左侧剩余空间 -->
    <v-card-text class="flex-grow-1">
      <h3>示例标题</h3>
      <p>这里是卡片的正文内容，会自动填充左侧区域</p>
    </v-card-text>

    <!-- 右侧垂直排列的操作按钮 -->
    <v-card-actions class="flex-column justify-center pa-3">
      <v-btn icon>
        <v-icon>mdi-pencil</v-icon>
      </v-btn>
      <v-btn icon>
        <v-icon>mdi-delete</v-icon>
      </v-btn>
    </v-card-actions>
  </v-card>
</template>

关键类说明： #

• d-flex flex-row：将v-card内部设置为横向flex布局
• flex-grow-1：让v-card-text占据卡片左侧的所有可用空间
• flex-column justify-center：让操作按钮垂直排列并居中对齐
• pa-3：调整按钮区域的内边距，避免紧贴边缘

方法二：自定义CSS绝对定位 #

如果需要更精细的位置控制，可以用绝对定位实现：

<template>
  <v-card max-width="600" class="card-custom">
    <v-card-text>
      <h3>示例标题</h3>
      <p>这里是卡片的正文内容</p>
    </v-card-text>

    <v-card-actions class="card-actions-right">
      <v-btn icon>
        <v-icon>mdi-pencil</v-icon>
      </v-btn>
      <v-btn icon>
        <v-icon>mdi-delete</v-icon>
      </v-btn>
    </v-card-actions>
  </v-card>
</template>

<style scoped>
.card-custom {
  position: relative; /* 为绝对定位提供参照 */
}

.card-actions-right {
  position: absolute;
  top: 50%;
  right: 16px; /* 按钮距离卡片右侧的距离 */
  transform: translateY(-50%); /* 垂直居中 */
  flex-direction: column;
  gap: 8px; /* 按钮之间的间距 */
  background: transparent; /* 移除默认背景 */
  box-shadow: none; /* 移除默认阴影 */
  padding: 0; /* 重置内边距 */
}
</style>

注意事项： #

• 两种方法在Vuetify 2和3版本中都适用，仅部分间距类可能略有差异（比如Vuetify3用gap-2替代自定义gap）
• 如果卡片内容过长，方法一的flex布局会自动适配，而方法二需要确保按钮不会遮挡内容

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