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>

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.

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

What are some ways in which I can utilize the Ember Handlebars helper?

Similar Question: Using logical operators in a Handlebars.js {{#if}} statement Below is the code snippet provided: {{#each dataArray}} <li>{{#isTrue idVal1 idVal2}} display some text1 {{else}} display some text2 {{/isTrue}} & ...

javascripthtmlember.jshandlebars.js

What steps should I take to modify my database while utilizing radio buttons in the edit mode?

I am experiencing an issue with the radio button functionality. When creating a new user.jsp, I am able to successfully add the value from the radio button to the database. However, when I attempt to edit the values in the jsp, the changes do not reflect i ...

javascriptjqueryhtmljsp

Create a circular status button that overlays on top of another element using CSS

Looking to enhance my CSS skills! Seeking advice on creating a status button that changes color based on chat availability and positioning it on top of another button. ...

htmlcss

Looking for a way to customize it using @emotion/styled? Dealing with the deprecated makeStyles from MUI problem?

I have been working on setting up my styling using @emotion since makestyles were removed in React 18. Despite making changes as per my research, I am not seeing any updates reflected on my page. The expected result looks like this: https://i.stack.imgur. ...

cssreactjsmaterial-uiemotion

Creating an HTML table by populating it with data from a JavaScript array

Imagine you have a JavaScript array structured like this: [ "Heading 1", "Heading 2", "Data 1", "Data 2", "Data 3", "Data 4", ] Your task is to generate an HTML table from this array that looks like the one in this link: https://i.stack.imgur.com/7laUR. ...

javascripthtmlcss

Guide to setting the ng-selected value within AngularJS

I am currently working on a project where I have a select element in my AngularJS application. I am populating the options using JSON values with ng-repeat, and I want to display the first value from the JSON as selected by default. I have tried two diffe ...

htmlangularjs

Exploring the Power of jQuery Event Attributes

Can someone explain the distinct difference between the keys delegateTarget and currentTarget in the jQuery event object? $(this).on('click',function(event){ console.log(event.delegateTarget); console.log(event.currentTarget); ...

htmljquery

PHP generated timetable displaying improperly formatted HTML cells

Having some trouble with my HTML table for a school timetable. This is what I want: Required Timetable. But instead, I'm getting something like this: Incorrect Timetable Here's the code snippet: // days of week array $days = array( 1 => &ap ...

phphtml

Is it feasible to utilize tutorials designed for vue-cli with CLI 3 instead?

Recently, I began my journey into learning Vue.js. The tutorial I am following recommends using npm install -g vue-cli, but unfortunately, I encountered some technical difficulties and despite trying various solutions, I was unable to resolve them. As ...

vue.js

Having trouble accessing the link from the dropdown list in Selenium

While trying to select a link from a dropdown menu, I am facing an issue with Selenium. The element is being located successfully, but it cannot be interacted with and the following exception is thrown: Error in thread "main" org.openqa.selenium.ElementNo ...

javahtmlseleniumselenium-webdriverselenium-iedriver

What factors cause variations in script behavior related to the DOM across different browsers?

When looking at the code below, it's evident that its behavior can vary depending on the browser being used. It appears that there are instances where the DOM is not fully loaded despite using $(document).ready or similar checks. In Firefox, the "els ...

javascriptlaravelvue.jsdomcross-browser

Exploring the Power of Vue 3 in Manipulating the DOM

Hello everyone, I am a beginner with Vue and I am interested in learning how to modify the DOM without relying on methods such as document.querySelector or getElementById. Let's take for instance this input: <input id="myInputId" class=& ...

javascriptvue.jsdomvuejs3

Is using .htaccess a reliable method for securing a specific file on the server?

Running a classifieds website comes with its own set of challenges, one being the need for an administrator to have the ability to remove classifieds at their discretion. To address this issue, I have developed a simple function that allows me to specify t ...

phpjavascripthtmlsecurity.htaccess

Display two examples from the material-ui documentation

My goal is to merge two demos found in the material-ui documentation. Clipped under the app bar - Describes a page layout Fixed header - Illustrates a table with a fixed header. I am looking for a solution where the table occupies the entire available p ...

cssreactjsmaterial-ui

Attributes not defined in Vue template

I created a component that functions as a basic generalized dialog. It has its own unique attributes that determine the icon data to display when receiving specific information from its parent component. However, I am encountering an issue where sometimes, ...

vue.jsvue-componentvuetify.js

Creating a Striking Multi-Layered CSS Header

Can someone help me figure out how to add horizontal lines behind the words in this header? Here is what I have so far: . However, I want to achieve something similar to this design: . You can view my progress on JSFiddle here: https://jsfiddle.net/n2tst0b ...

htmlcss

Is there a way to control a single Angular application using multiple JavaScript scripts?

Summary: I am looking for a way to allow two script files to handle different tasks within the same angular app. One needs to initialize the app, while the other needs to assign a templateCache object to a section of JSON stored in localStorage. Backgrou ...

javascripthtmlangularjs

Having extra space can occur when adding margin to a div within another div in HTML5

I am facing an issue with the following piece of code: <body> <div class="page-top"> * </div> <div class="page-bottom"> <div class="contentbox"> <h1>CONTENTBOX</h1> </div ...

csshtml

Sending JSON data to Python CGI script

I've successfully set up Apache2 and got Python running without any issues. However, I'm facing a problem with two pages - one is a Python Page and the other is an HTML page with JQuery. Could someone guide me on how to correctly make my ajax p ...

jquerypythonhtmlajax

Customizing CSS for Internet Explorer browsers

I am looking to target specific CSS styles for Internet Explorer only, without affecting other browsers. Initially, I tried using conditional comments: <!--[if lt IE 7 ]><html class="ie6 ie"> <![endif]--> <!--[if IE 7 ]><html cl ...

htmlcssinternet-explorerconditional-comments