html - vuetify 中的右对齐按钮

标签 html css vuetify.js

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

这是我正在尝试的...

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

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

enter image description here

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

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

enter image description here

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

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

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

最佳答案

好吧,我很乐意接受一个不那么冗长的答案,但我能完成它的唯一方法是将 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>

关于html - vuetify 中的右对齐按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55719689/

相关文章:

html - 最小高度 100% 拉伸(stretch)

html - 一个 flex 元素设置了 sibling 的高度限制

html - 如何将 'Choose File' 输入的 Bootstrap 4 样式应用于 Django 表单?

javascript - Scrollmagic - 使用多个补间更改主体和 div 背景颜色

CSS 最小最大值() : prioritize max value

css - Vuetify,文本字段旁边的对齐按钮

vue.js - 如何使用 vuetify 在 v 视差图像上制作渐变?

asp.net - 在 IE 6 中调整 Div 大小

javascript - 向 div 添加工具提示

html - 验证 : asterix on required labels