如何调整元器件尺寸？

Question

我有一个项目，包括文本字段，按钮和一个特定的表单设计。我正在使用Vuetify来实现这一点，但是有一个问题我不知道如何处理: Vuetify组件维度似乎是不可更改的。

例如：

​

​

我希望v-text-field，v-select和v-btn有相同的高度，而<v-select>相对于按钮有一点宽。

有什么办法可以在武帝酒店做到这一点吗？还是由CSS叠加处理？

Answer 1

这里有一种方法，使用flexbox将项目保留在一行，其中一个子项目占用了所有剩余的空间。Flexbox有很好的能力覆盖子宽度并给出可预测的结果。

​

<div style='display:flex'>

<div style='flex:0 0 auto'>Item 1</div>
<div style='flex:1; background-color: yellow'>Item 2</div>
<div style='flex:0 0 auto'>Item 3</div>

</div>

​

Answer 2

关于高度，这里有一个输入和按钮签出的高度属性：https://vuetifyjs.com/en/api/v-input/#props-height