Arrange text in a line below neatly in a list

My goal is to line up items on the same row, as shown in the screenshot. I need the opening hours to align consistently in the list. The data is retrieved from a database and displayed using Vue.

This is how I currently display the opening hours and days. How can I ensure that the hours align properly in the list to avoid the misalignment seen in the 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>

https://i.sstatic.net/I7nhP.png

https://i.sstatic.net/rvNQq.png

htmlcsslistvue.js

Answer №1

To achieve the desired layout, simply add the following CSS style for the list item element in your stylesheet:

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

I have also created an example for you to visualize this concept.

https://i.sstatic.net/Z2Klt.png

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

A new version of Primefaces has been released, introducing a sleek button feature with

How can I utilize the Primefaces version 10 button with a Font Awesome icon, resizing the icon without displaying the words ui:button? A and B are tests that I can resize successfully, but they are not buttons. C and D are buttons where the icon is resize ...

cssprimefaces

What are some ways to design a side-by-side arrangement of an image and a label?

I've been attempting to achieve the design shown below, but have been unsuccessful so far: https://i.sstatic.net/N9jGH.png .exploreItem { background-color: #353258; /* rgba(31, 31, 31, 1) */ border: 1px solid #4152F1; color: white; /* pa ...

htmlcsslayout

Developing a multi-language Laravel Vue website with string keys for translations

I've been on the lookout for a simple solution without plugins. In my translation file, I'm using Laravel's string as key format. Inside the fr.json file, all texts and their translations are stored. It functions well with Blade, but I&apo ...

phplaravelvue.jsvuejs2

A guide on transforming CSV data into JSON format using Vue

Hello! I have a challenge where I am retrieving data from an API using Axios, but the data is in csv format and I'm struggling to convert it into a JSON object. I've experimented with various JavaScript libraries, but none of them seem to be com ...

jsonvue.jscsv

Having trouble retrieving data from the input fields with jQuery

My handlebars file looks like this: <div class="row"> <div class="col-md-6 col-md-offset-3"> <div class="login-form"> <form class="form-horizontal well"> <div class="form-group"> ...

jqueryhtml

Comparing the positions of elements in Selenium WebDriver with PHP

One of the elements on my webpage serves as a button that reveals a drop-down menu. Due to various factors affecting the page layout, there were some alignment issues between the button and the menu until a few bugs were fixed. I am now looking for a way t ...

javascriptphpcssselenium-webdriver

Exploring the dynamic world through HTML5 canvas and animated objects

Today I am exploring HTML 5 canvas and experimenting with moving 3 circles on the canvas. Based on my research, it looks like I need to continuously redraw the circles (perhaps every 60 milliseconds) and clear out the old circle before rendering the new on ...

javascripthtmlcanvashtml5-canvas

After the decimal point, there are two digits

My input field is disabled, where the result should be displayed as a product of "Quantity" and "Price" columns ("Quantity" * "Price" = "Total"). However, I am facing an issue where the result often displays more than 2 digits (for example: 3 * 2.93), desp ...

javascriptjqueryhtml

How to adjust the size of a div based on its child content, including margins

I have encountered an issue with animating the height of a configurable content div, which typically contains paragraphs of text. Shown below is my animation (slowly paced), starting from a height of 0 and expanding to its calculated height based on its c ...

htmlcss

Tips for concealing items on a website within a WebView

Is it possible to hide the header element with the search bar and logo when loading this page on a Webview? I'm not familiar with JavaScript, so is there a way to achieve this? The section I am looking to conceal ...

javascriptandroidhtmlandroid-webview

What is the process for configuring the npm build settings to move my CSS and JS files into the static folder? I am using Vue CLI 3, npm, and Vuetify for my project

Currently, I am utilizing Vue CLI 3 along with Vuetify. My backend developer has requested that I place my css, js, and image files in a static folder for his access. However, I am unable to locate the webpack.config.js file within the structure of Vue CLI ...

vue.jsnpmwebpackvuetify.js

Preserving form POST information between form handler and header invocation

I've hit a roadblock with this issue and could use some assistance. Thank you in advance for any help. I have a form on a page (guest/build.php) that contains several radio buttons: <form action="../php/build.php" method="POST"> <table class ...

phphtmlpost

Choosing multiple classes using Xpath

<div class="unique"> <a class="nested" href="Another..."><img src="http://..."/></a> <p> different.... </p> <p><img src="http://....." /></p> </div> I have this interesting HTML struc ...

pythonhtmlxpathhtml-parsinglxml

After AngularJS has loaded, CSS animations seem to be ineffective

When loading a page, I have created a div that is displayed. Here is the code: <div ng-show="load" class="rb-animate-time rb-animate-hide rb-load"> <div class="text">Hello world</div> </div> <div ng-init="load = false">&l ...

javascriptcssangularjs

Disable reloading when submitting and reset input fields after submission

I am working on developing a website where users can post things and comments without the need to refresh the page. I have encountered some issues while implementing this feature and need some assistance with it. My goal is to allow users to submit comment ...

javascriptphphtmljqueryajax

Display a concealed text box upon clicking BOTH radio buttons as well as a button

Below is the HTML code for two radio buttons and a button: <body> <input data-image="small" type="radio" id="small" name="size" value="20" class="radios1"> <label for=&qu ...

javascripthtmljqueryradio-button

Is it advisable to incorporate multiple images onto a single canvas?

What is the best approach to handling multiple images in HTML5? Is it preferable to create a separate canvas tag for each image or is it equally effective to have multiple images in one canvas, and how would I go about doing that? Here is the code I have ...

htmlimagehtml5-canvas

Bringing in Unique Fonts with Flask and Tailwind CSS

I'm currently developing a web application using Flask and Tailwind CSS, but I am facing an issue with importing custom fonts. Despite successfully building the CSS file, the HTML template fails to display the font as intended. How can I ensure that m ...

pythonhtmlflaskjinja2tailwind-css

Upload several files to your form using formkit

I'm trying to create a form in vue.js using FormKit that allows users to upload multiple files. However, despite adding multiple="true" as the documentation suggests, I am unable to select more than one file. Here is the code snippet I have ...

vue.jsformkit

Using the pattern `[A-Za-z]{50}` in HTML is mistakenly identifying valid input as invalid

I created a webpage with text fields and wanted to limit user input using the HTML5 pattern attribute. Here is an example of how I implemented it: <input name="team_name" type="text" pattern="[A-Za-z]{50}" value="<?php echo $team_name;?>"> Ev ...

htmlregexinput