html - vuetify 中的右对齐按钮

Question

我希望我的页面顶部在左侧有一个标题，在右侧有一个按钮，然后在下方有一条浅色标尺线。

这是我正在尝试的...

<span class="title">Morticia & Gomez Addams</span>
<v-btn @click="save()">Save</v-btn> 
<v-divider class="pb-3"></v-divider>

但这就是它产生的...按钮不是右对齐的

我认为 v-spacer 是完成这项工作的方法，但这给了我一个新行。

<span class="title">Morticia & Gomez Addams</span>
<v-spacer></v-spacer>
<!-- button, etc --!>

我也尝试过“对齐助手”...

<!-- etc. --!>
<span class="text-xs-right"><v-btn @click="save()">Save</v-btn></span>
<!-- etc. --!>

我更喜欢使用 vuetify 内置样式，但我会很感激你能提供的任何帮助。

Answer 1

好吧，我很乐意接受一个不那么冗长的答案，但我能完成它的唯一方法是将 v-card 欺骗成我想要的...

<v-card color="transparent" class="elevation-0">
  <v-toolbar color="transparent" class="elevation-0">
    <span class="title">Morticia & Gomez Addams</span>
    <v-spacer></v-spacer>
    <v-btn @click="save()" small>Save</v-btn>
  </v-toolbar>
  <v-divider class="pb-3"></v-divider>
</v-card>