Question

是否可以将元素与vuetify的卡片组件中的v-card-title高度对齐？使用class="float-right"时，Currentl元素位于右侧，但位于标题下方。我希望它处于同一水平。这是codepen：

new Vue({
  el: '#app',
  vuetify: new Vuetify(),

})

<div id="app">
  <v-app id="inspire">
    <v-card
      class="mx-auto"
    width="400"
    >
<!--  Top row -->
    <v-card-title>Cafe Badilico</v-card-title>
      <button class="float-right">click me</button>
<!--     End of top row -->

<!-- Put components here -->
  
     
  
        
    <v-card-title >
     News 
    </v-card-title>
   
<v-list-item dense
        >
  
          <v-list-item-avatar>
             <v-avatar color="indigo" size="36">
      <span class="white--text headline">36</span>
    </v-avatar>
          </v-list-item-avatar>
          <v-list-item-content>
            <v-list-item-title>Header</v-list-item-title>
            <v-list-item-subtitle>Subheader</v-list-item-subtitle>
            <v-list-item-subtitle>2019-05-31</v-list-item-subtitle>
          </v-list-item-content>
        </v-list-item>
   <v-divider></v-divider>
   <v-card-title >
     News 
   </v-card-title>
   
<v-list-item dense>
  
          <v-list-item-avatar>
             <v-avatar color="indigo" size="36">
      <span class="white--text headline">36</span>
    </v-avatar>
          </v-list-item-avatar>
          <v-list-item-content>
            <v-list-item-title ><a href="">Header</a></v-list-item-title>
           
            <v-list-item-subtitle >Subheader</v-list-item-subtitle>
            <v-list-item-subtitle >2019-05-31</v-list-item-subtitle>
          </v-list-item-content>
        </v-list-item>
      
  

    </v-card>
  </v-app>
</div>

Answer 1

您可以将按钮移到标题中并使用v-spacer组件：

<v-card-title>
  Cafe Badilico
  <v-spacer></v-spacer>
  <button>click me</button>
</v-card-title>

https://codepen.io/El_Matella/pen/mdJrKNE

如果您不希望它成为标题组件的一部分，则还可以使用flex容器：

<div class="d-flex align-center justify-space-between">
  <v-card-title>
    Cafe Badilico
  </v-card-title>
  <button>click me</button>
</div>

https://codepen.io/El_Matella/pen/ZEGpjEq

将元素与vuetify中的v-card-title对齐

1 个答案: