在 vuetify 中将对齐文本放在同一行答案

【问题标题】：Placing aligning text on the same line in vuetify在 vuetify 中将对齐文本放在同一行
【发布时间】：2020-05-13 22:00:05
【问题描述】：

我正在尝试对齐文本，使其一部分在卡片的左侧，另一部分在右侧（基本上中间有空格）

但是使用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

【问题讨论】：

标签： css vue.js vuetify.js

【解决方案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

【讨论】：

【解决方案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

【讨论】：