css - 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

使用 d-flex 比 v-row 好，因为 v-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-行

d-flex