右对齐 v-list-item-content答案

【问题标题】：align right v-list-item-content右对齐 v-list-item-content
【发布时间】：2019-10-04 04:48:18
【问题描述】：

我的脚本是这样的：

=====================-----=====================-- ---====================

<template>
  <v-card
    max-width="1200"
    class="mx-auto"
  >
    <v-container
      class="pa-2"
      fluid
    >
      <v-row>
        <v-col
          v-for="(item, i) in items"
          :key="i"
        >
          <v-card
            :color="item.color"
            dark
          >
            <v-list-item three-line>

              <v-list-item-avatar
                size="125"
                tile
              >
                <v-img :src="item.src"></v-img>
              </v-list-item-avatar>

              <v-list-item-content class="align-self-start">
                <v-list-item-title
                  class="headline mb-2"
                  v-text="item.title"
                ></v-list-item-title>

                <v-list-item-subtitle v-text="item.artist"></v-list-item-subtitle>
                <v-list-item-subtitle v-text="item.artist"></v-list-item-subtitle>
              </v-list-item-content>

              <v-list-item-content class="align-self-start">
                <v-list-item-title
                  class="headline mb-2"
                  v-text="'right align'"
                ></v-list-item-title>
              </v-list-item-content>

            </v-list-item>
          </v-card>
        </v-col>
      </v-row>
    </v-container>
  </v-card>
</template>

<script>
  export default {
    data: () => ({
      items: [
        {
          color: '#1F7087',
          src: 'https://cdn.vuetifyjs.com/images/cards/foster.jpg',
          title: 'Supermodel',
          artist: 'Foster the People',
        }
      ],
    }),
  }
</script>

=====================-----=====================-- ---====================

结果是这样的：

我希望“右对齐”在正确的位置

我该怎么做？

请帮帮我，伙计们。非常感谢

【问题讨论】：

真的需要看看你的css才能尝试一下！
@Fergmux 这是使用 vuetify。你可以在文档中试试

标签： vue.js vue-component vuetify.js

【解决方案1】：

您可以使用helper class 来对齐您的文本。

<v-list-item-content class="text-right align-self-start">
    <v-list-item-title
        class="headline mb-2"
        v-text="'right align'"
        >
    </v-list-item-title>
</v-list-item-content>

【讨论】：

【解决方案2】：

在两个<v-list-item-content> 之间使用<v-spacer></v-spacer>。

 <v-list-item-content class="align-self-start">
                <v-list-item-title
                  class="headline mb-2"
                  v-text="item.title"
                ></v-list-item-title>

                <v-list-item-subtitle v-text="item.artist"></v-list-item-subtitle>
                <v-list-item-subtitle v-text="item.artist"></v-list-item-subtitle>
              </v-list-item-content>
<!-- This one -->  <v-spacer></v-spacer> <!-- This one -->
              <v-list-item-content class="align-self-start">
                <v-list-item-title
                  class="headline mb-2"
                  v-text="'right align'"
                ></v-list-item-title>
              </v-list-item-content>

【讨论】：

它不在右上角。我想把它放在最右边的角落