如何将 v-text-field 标签向右对齐？

【问题标题】：How to align the v-text-field label to the right?如何将 v-text-field 标签向右对齐？
【发布时间】：2020-05-26 18:48:54
【问题描述】：

是否可以将 Vuetify 的文本字段的标签向右对齐？

<v-text-field label="Align this label to the right"></v-text-field>

【问题讨论】：

你可以使用reverse属性，但是它会把所有的都放在右边，而不仅仅是标签

标签： vue.js vuetify.js

【解决方案1】：

我认为它对你有用。

<v-text-field label="Align this label to the right" reverse></v-text-field>

【讨论】：

【解决方案2】：

这可能适用于自定义类，然后在样式中：

.custom .v-label {
  right: 0 !important;
  text-align: end;
  left: 100px !important;
}

你需要用一个假值覆盖 left:0。我用 100px 测试了一下，看起来还不错。

【讨论】：

【解决方案3】：

v-spacer 将推动一切正常。因此，您可以通过单独添加标签和文本字段来执行以下操作。在 12 个网格中，前 9 个是标签前的空格。

<v-layout row>
  <v-spacer></v-spacer>
  <v-flex xs1>
    <v-subheader>Label value</v-subheader>
  </v-flex>
  <v-flex xs2>
    <v-text-field></v-text-field>
  </v-flex>
</v-layout>

【讨论】：