首頁  >  問答  >  主體

將元素與 vuetify3 區塊按鈕中的兩側對齊:指南

<p>假設我有以下按鈕:</p> <pre class="brush:php;toolbar:false;"><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></pre> <p>左側和右側的圖示與文字夾在一起。如何將它們分別放置在按鈕的右側和左側邊緣?我嘗試過使用 <code>v-spacer</code>s,但它不起作用。我還嘗試在按鈕中使用 <code>v-row</code> ,但無濟於事,因為專案變得更加不對齊。 </p>
P粉680000555P粉680000555440 天前456

全部回覆(1)我來回復

  • P粉573809727

    P粉5738097272023-08-31 09:16:31

    您可以使用 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>

    回覆
    0
  • 取消回覆