javascript - Vuetify.js：如何在 v-card' v-img 组件的右上角显示文本？

Question

在 Vuetify.js 中，我想在 v-card 图像的右侧显示一个单词文本：

<v-card>
   <v-img 
        rc="https://cdn.vuetifyjs.com/images/cards/desert.jpg"
        aspect-ratio="2.75">
        <span class="my-span">
          Info
        </span>
   </v-img>
</v-card>

但这是我得到的结果：

即使my-span说margin-right:0;：

.my-span {
  background-color:blue;
  color:white;
  font-weight:bold;
  margin-right:0;
}

如何解决这个问题？

代码笔。

标签： javascriptcssvue.jsvuetify.js

Answer 1

float: right;在你的 CSS 中使用：

new Vue({
  el: '#app'
})

.my-span {
  background-color: blue;
  color: white;
  font-weight: bold;
  margin-right: 0;
  float: right;
}

<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.3.5/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify@1.3.5/dist/vuetify.min.css" />
<div id="app">
  <v-app id="inspire">
    <v-layout>
      <v-flex xs12 sm6 offset-sm3>
        <v-card>
          <v-img src="https://cdn.vuetifyjs.com/images/cards/desert.jpg" aspect-ratio="2.75">
            <span class="my-span">
              Info
            </span>
          </v-img>
        </v-card>
      </v-flex>
    </v-layout>
  </v-app>
</div>