Vuetify，文本字段旁边的对齐按钮

Question

我有一个文本字段，在文本字段的右侧附加了一个按钮。我的问题是按钮有上边距并且与文本字段不对齐。如下图所示，该按钮太低了。

例子：

问题：

如何以本机方式将按钮与文本字段对齐？

我尝试将 class="mt-0" 应用于按钮，但这没有改变任何内容。

代码：

<v-row>
  <v-col md="6" offset-md="3">
    <v-text-field class="pt-5" placeholder="Strawberries" outlined clearable>
      <!-- <template slot="append">
        <v-icon>clear</v-icon>
      </template> -->
      <template slot="append-outer">
        <v-btn dark x-large color="pink"> SEARCH </v-btn>
      </template>
    </v-text-field>
  </v-col>
</v-row>

感谢您的帮助！

Answer 1

使用比asd-flex更好，可以消除间距和其他东西。v-rowv-row

<div class="d-flex">
    <v-text-field class="pt-5 mr-2" placeholder="Strawberries" outlined clearable></v-text-field>
    <v-btn dark x-large color="pink"> SEARCH </v-btn>
</div>

v-row

d-flex

Answer 2

用这个：

<v-row>
    <v-text-field class="pt-5" placeholder="Strawberries" outlined clearable></v-text-field>
    <v-btn dark x-large color="pink"> SEARCH </v-btn>
</v-row>