CODEWITHSUNDEEP
htmlcssvue.js
Sravani
Sravani

Reputation: 417

How to provide space between two contents by using flex in vue.js?

I developed one card which contains several sections ,my requirement is after Rs.1500 (class="price-section") i want to print same line of (2000)[label], i tried different ways but it's not happening please help me to acheive this thing[like this i want]1.like this i am getting

DisplayBooks.vue

<template>
<div class="carddisplay-section">
    <div class="card">
        <div class="image-section">
            <div class="image-container">

            </div>
        </div>
        <div class="title-section">
            Don't Make Me Think
        </div>
        <div class="author-section">
            by tarun
        </div>
        <div class="price-section">
            Rs. 1500 <label>(2000)</label>
        </div>

    </div>
</div>
</template>
<style  scoped>
.price-section{
text-align: left;
font: normal normal bold 12px/16px Roboto;
letter-spacing: 0px;
color: #0A0102;
opacity: 1;
margin-left:20px;
width: 48px;
height: 16px;
margin-top:26px;
 display: flex;
 flex-wrap: wrap;

}
label{
    text-decoration-line: line-through;
    font: normal normal normal 10px/13px Roboto;
    letter-spacing: 0px;
    color: #878787;
    opacity: 1;
    width: 36px;
    height: 13px;
    /* margin-left:73px; */
   
}
</style>

Upvotes: 0

Views: 1219

Answers (3)

tony19
tony19

Reputation: 138216

display:flex is normally enough to place items horizontally adjacent to each other (as row is the default flow-direction). The problem is .price-section has a very narrow width, so there's no room for the <label> to be placed on the same line.

The solution is to remove the width from .price-section, which allows the items to be on the same line. Then apply a margin-left on label to add some spacing:

.price-section {
  /*width: 48px;*/
}

label {
  margin-left: 1em;
}

demo

Upvotes: 1

Sowmyadhar Gourishetty
Sowmyadhar Gourishetty

Reputation: 1878

Try this once. Sample working code is here

<div class="price-section">
    <b>Rs. 1500</b> <span>(2000)</span>
</div>

.price-section{
   position: relative;
}

.price-section span {
   position: absolute;
   top: 0;
   text-decoration-line: line-through;
   font: normal normal normal 10px/13px Roboto;
   letter-spacing: 0px;
   color: #878787;
   padding-left: 5px;
}

Upvotes: 0

Sarwar Ahmed
Sarwar Ahmed

Reputation: 994

You can use simply span tag and justify-content: flex-start or justify-content: space-between; properties

<div class="price-section">
    <span>Rs. 1500<span><label>(2000)</label>
</div>

Style

.price-section{
    display: flex;
    justify-content: flex-start;
}

Upvotes: 0

Related Questions