假设我有以下按钮：
1
850<v-btn block size="x-large">
<v-btn icon size="small" variant="contained">
<v-icon>mdi-information</v-icon>
</v-btn>
Button Text
<v-icon>mdi-check</v-icon>
</v-btn>
左侧和右侧的图标与文本夹在一起。如何将它们分别放置在按钮的右侧和左侧边缘？我尝试过使用 v-spacers，但它不起作用。我还尝试在按钮中使用 v-row ，但无济于事，因为项目变得更加不对齐。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
您可以使用
justify属性水平对齐项目。现场演示：
new Vue({ el: '#app', vuetify: new Vuetify() })<script src="https://unpkg.com/vue@2.x/dist/vue.js"></script> <script src="https://unpkg.com/vuetify@2.6.10/dist/vuetify.min.js"></script> <link rel="stylesheet" href="https://unpkg.com/vuetify@2.6.10/dist/vuetify.min.css"/> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"/> <link rel="stylesheet" href="https://unpkg.com/@mdi/font@6.x/css/materialdesignicons.min.css"/> <div id="app"> <v-app id="inspire"> <v-btn block size="x-large"> <v-row justify="space-between"> <v-col md="4"> <v-btn icon size="small" variant="contained"> <v-icon>mdi-information</v-icon> </v-btn> </v-col> <v-col>Button Text</v-col> <v-col md="4"> <v-btn icon size="small" variant="contained"> <v-icon>mdi-check</v-icon> </v-btn> </v-col> </v-row> </v-btn> </v-app> </div>