时间戳

首页 > 解决方案 > 在 vuetify 中将对齐文本放在同一行

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

问题描述

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

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

标签： cssvue.jsvuetify.js

解决方案

我通过改变让它工作

$ • 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

推荐阅读