CODEWITHSUNDEEP
htmlcsslistvue.js
Penalse
Penalse

Reputation: 185

Align text on the same line below in list

I'm trying to align items on the same line. (See screenshot). I want opening hours at the same point on the list. I got data from database and use vue to displayed that data.

This is the way I display opening hours and days. So how I can make that hours are the same point of the list, so there is no throws like image below?

<ul class="display-items"
    v-for="item in opendays_hours">
     
    <li class="display-item" v-if="item">
         {{item.day}} {{item.times}}
    </li>
</ul>

This is how it displayed now

This example shows monday-wednesday how I want to display days and hours

Upvotes: 2

Views: 285

Answers (1)

Suneel Kumar
Suneel Kumar

Reputation: 779

You can achieve this by just adding css style for li, try to add this css style for li in your style file

li{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

I have created an example also, let me share with you

Please checkout this screenshot

Upvotes: 2

Related Questions