css - 在 vuetify 中将对齐文本放在同一行

Question

我正在尝试对齐文本，以便它的一部分在卡片的左侧，另一部分在右侧(基本上中间有空间)

但是使用 class="text-right"向下移动文本。

任何人都知道如何将其向右移动但保持在同一条线上？

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

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <v-app id="inspire">
    <v-card
      
      class="mx-auto"
    width="400"
    >

  
      <v-card-title>Cafe Badilico</v-card-title>
  
      <v-card-text>
        <v-row
          align="center"
          class="mx-0"
        >
         
  
        </v-row>
  
        <div class="my-4 subtitle-1 black--text">
          $ • Italian,Cafe
          <p class="text-right">Small plates</p>
        </div>
  

      </v-card-text>
  
      <v-divider class="mx-4"></v-divider>
  
      <v-card-title>Tonight's availability</v-card-title>
  
      
  

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

这是codepen中的结果

https://codepen.io/pokepim/pen/ZEYZwRN

Answer 1

我通过改变让它工作

$ • Italian,Cafe
<p class="text-right">Small plates</p>

到

<p>$ • Italian,Cafe <span class="float-right">Small plates</span></p>

“小盘子”在它自己的“p”元素中，它总是在下一行。所以把它们放在同一个“p”元素中。然后将“小盘子”包裹在“跨度”中，并将该跨度赋予 .float-right Vuetify 类。有关浮点类的信息，请参阅 Vuetify 文档 https://vuetifyjs.com/en/styles/float