In Vuetify.js, I want to display a one word text on the right side of a v-card image:

<v-card>
   <v-img 
        rc=".jpg"
        aspect-ratio="2.75">
        <span class="my-span">
          Info
        </span>
   </v-img>
</v-card>

But this is the result I get:

Even if my-span says margin-right:0;:

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

How to fix this?

Codepen.

In Vuetify.js, I want to display a one word text on the right side of a v-card image:

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

But this is the result I get:

Even if my-span says margin-right:0;:

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

How to fix this?

Codepen.

• javascript
• css
• vue.js
• vuetify.js

• 1 Use absolute positioning. Updated Codepen: codepen.io/anon/pen/JePOOg – m4n0 Commented Nov 2, 2018 at 8:37

1 Answer 1

Use float: right; in your 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/npm/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr/npm/[email protected]/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr/npm/[email protected]/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./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>