如何将v-btn对齐到v-card内嵌列表的右侧边缘

你需要调整两个关键部分来实现按钮对齐到v-card右侧：

核心修改点 #

• 修正列表结构：v-list-subheader是列表的分组标题，不能嵌套v-list-item，需将v-list-item作为v-list的直接子元素。
• 添加flex布局控制：给v-list-item添加flex类，让内容区与按钮自动分配空间，按钮自然对齐右侧。

修改后的完整代码 #

<v-card
  class="my-1"
  v-for="(foundPackage, n) in foundPackages"
  :key="n">
  <v-list lines="two">
    <!-- 子标题作为v-list的直接子元素 -->
    <v-list-subheader class="text-h6 font-weight-bold">
      {{ foundPackage[0].packages[0].name }}:
    </v-list-subheader>
    <!-- v-list-item作为v-list的直接子元素，添加flex布局类 -->
    <v-list-item
      v-for="pkg in foundPackage"
      :key="pkg.id"
      class="d-flex justify-space-between align-center"
    >
      <!-- 用v-list-item-content包裹标题和副标题，确保内容作为整体布局 -->
      <v-list-item-content>
        <v-list-item-title class="text-subheader-2">{{ pkg.defin }}</v-list-item-title>
        <v-list-item-subtitle>{{ pkg.packages[0].name }}</v-list-item-subtitle>
      </v-list-item-content>
      <template v-slot:prepend>
        <v-avatar :color="pkg.source.toLowerCase().includes('avail') ? 'blue-darken-2' : 'orange-darken-4'">
          <v-icon>
            {{ pkg.source.toLowerCase().includes('avail') ? 'mdi-compass-outline' : 'mdi-factory' }}
          </v-icon>
        </v-avatar>
      </template>
      <template v-slot:append>
        <v-btn :href="pkg.url">URL</v-btn> <!-- 按钮将对齐到右侧 -->
      </template>
    </v-list-item>
  </v-list>
</v-card>

说明 #

• justify-space-between会让v-list-item内的元素两端对齐，标题内容靠左，按钮靠右。
• align-center确保垂直方向居中对齐，避免布局错位。
• v-list-item-content将标题和副标题包裹成一个整体，防止按钮穿插在文本区域中。

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