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

【问题标题】：Vuetify, align button next to text fieldVuetify，文本字段旁边的对齐按钮
【发布时间】：2020-11-04 14:06:27
【问题描述】：

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

示例：

问题：

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

我尝试将 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>

感谢您的帮助！

【问题讨论】：

标签： css vue.js vuetify.js

【解决方案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-row

d-flex

【讨论】：

【解决方案2】：

我遇到了同样的问题，但我能找到的唯一简单解决方案是将hide-details 添加到v-text-field。但不幸的是，如果这是您需要的，这会删除验证消息。

【讨论】：

【解决方案3】：

使用这个：

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

【讨论】：