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

Question

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

\n\n

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

\n\n

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

\n\n

\r\n

\r\n

new Vue({\r\n  el: \'#app\',\r\n  vuetify: new Vuetify(),\r\n\r\n})

\r\n

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>\r\n<div id="app">\r\n  <v-app id="inspire">\r\n    <v-card\r\n      \r\n      class="mx-auto"\r\n    width="400"\r\n    >\r\n\r\n  \r\n      <v-card-title>Cafe Badilico</v-card-title>\r\n  \r\n      <v-card-text>\r\n        <v-row\r\n          align="center"\r\n          class="mx-0"\r\n        >\r\n         \r\n  \r\n        </v-row>\r\n  \r\n        <div class="my-4 subtitle-1 black--text">\r\n          $ \xe2\x80\xa2 Italian,Cafe\r\n          <p class="text-right">Small plates</p>\r\n        </div>\r\n  \r\n\r\n      </v-card-text>\r\n  \r\n      <v-divider class="mx-4"></v-divider>\r\n  \r\n      <v-card-title>Tonight\'s availability</v-card-title>\r\n  \r\n      \r\n  \r\n\r\n    </v-card>\r\n  </v-app>\r\n</div>

\r\n

\r\n

\r\n

\n\n

这是codepen中的结果

\n\n

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

\n

Answer 1

我通过改变让它工作

\n\n

$ \xe2\x80\xa2 Italian,Cafe\n<p class="text-right">Small plates</p>\n

\n\n

到

\n\n

<p>$ \xe2\x80\xa2 Italian,Cafe <span class="float-right">Small plates</span></p>\n

\n\n

由于“小盘子”位于其自己的“p”元素中，因此它将始终位于下一行。因此，将它们放在同一个“p”元素中。然后将“小板”包装在“跨度”中，并将该跨度赋予 .float-right Vuetify 类。有关 float 类，请参阅 Vuetify 文档https://vuetifyjs.com/en/styles/float

\n