在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

- Alex T

Answer 1

我将更改后使其工作的方法是修改了

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

为了

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

使用"小盘"在它自己的"p"元素中，它将始终在下一行。所以把它们都放到同一个"p"元素中。然后将"小盘"包裹在一个"span"中并给该"span"添加.float-right Vuetify类。请参阅Vuetify文档以了解浮动类 https://vuetifyjs.com/en/styles/float

- JoshuaK98

Answer 2

这是因为 my-4 subtitle-1 black--text 是块级元素，占据整行宽度。您需要将其更改为 display: flex，这是最佳实践，并使用 justify-content 属性。

这里有一个更优雅的解决方案 -

my-4 subtitle-1 black--text {
    display: flex;
    justify-content: space-between; // to throw each element to side.
}

您可以删除.text-right类。

以下是有关显示值差异的一些有价值的文章 - https://www.bitdegree.org/learn/css-display

- Or Ben-Yossef