vuetify中的右对齐按钮

Question

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

这就是我正在尝试的...

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

但是这就是它产生的...按钮不正确

https://www.rcsb.org/pdb/software/wsreport.do

我以为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>