Tips on how to showcase list items in a horizontal manner while maintaining consistent spacing and ensuring they are

I have a list of items denoted by the "li" tag, and I am looking for a way to display them horizontally or in a neat format.

Below is the HTML code snippet:

<!doctype html>
<html lang="en" ng-app="app">

<head>
...
</head>

<body>
...

The "li" tags and the corresponding result are shown below:

  **<li ng-repeat="re in value.request""list-group-item">
                                        {{re.Field}} {{re.length}} {{re.value}}</li>**
                                </ul></li>

DE-000      004        0110
DE-001      008        00110010 00111010 00000000 00000000 00001110 11000001                          
                       10000000 00000010 
DE-003      006        003000
...

I want to format this data so that it displays properly aligned as shown below:

DE-000      004        0110
DE-001      008        00110010 00111010 00000000 00000000 00001110 11000001                          
                       10000000 00000010 
DE-003      006        003000
...

I've tried using tables for formatting, but the alignment gets disrupted with each loop iteration. Is there a way to achieve proper alignment without using tables?

jqueryhtmlcss

Answer №1

If you want to achieve this, follow these steps:

.list-unstyled{
  list-style: none;
}
.list-unstyled li span{
  display: inline-block;
  margin-right: 40px;
}
.list-unstyled li span:last-child{
  margin-right: 0;
}
<ul class="list-unstyled">

  <li>
    <span>DE-000</span>
    <span>004</span>
    <span>0110</span>
  </li>
  
  <li>
    <span>DE-000</span>
    <span>004</span>
    <span>0110</span>
  </li>
  
  <li>
    <span>DE-000</span>
    <span>004</span>
    <span>0110</span>
  </li>
  
  <li>
    <span>DE-000</span>
    <span>004</span>
    <span>0110</span>
  </li>

</ul>

Answer №2

If you're unsure about the maximum width of an element, using a table might be the ideal solution in this case. Tables are specifically designed for displaying tabular data, which fits your scenario perfectly. By utilizing modern display properties, you gain complete control over how your table is presented.

Instead of traditional table elements, consider implementing the following code snippet (Note: Syntax may vary if you're not familiar with Angular):

<div id=fields>
**<p ng-repeat="re in value.request""list-group-item">

     <span>{{re.Field}}</span>
     <span>{{re.length}}</span>
     <span>{{re.value}}</span></p>**
</div>

To style the layout effectively, experiment with the CSS rules below:

    #fields {
        display: table;
        width:100%;
    }
    #fields p {
        display: table-row;
    }
    #fields p span {
        display: table-cell;
        margin-right: 20px;
    }

You have the freedom to adjust the columns' spacing as necessary by modifying the CSS properties mentioned above.

Answer №3

apply the following CSS rule

a{color: blue;}

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

create a miniature display featuring text and visuals using HTML

Currently, I am in the process of developing a website and require assistance. My goal is to have a small screen appear with text and images whenever a link is clicked, similar to the functionality found in Chrome's "chrome://settings/startup". Howeve ...

html

The picture is malfunctioning

I am experiencing an issue with the placement of an image in my HTML code. When I place the image inside the nav element, it works perfectly fine. However, when I try to put it inside the body or header elements, it doesn't display properly. I am new ...

htmlcssimage

Personalized modify and remove elements on a row of the DataGrid material-ui version 5 component when hovered over

In my React Js app, I am utilizing Material UI components or MUI v5 as the UI library for my project. Within the DataGrid/DataGridPro component, I am implementing a custom edit and delete row feature. The requirement is to display edit and delete icons w ...

javascriptcssreactjsmaterial-ui

Problem Encountered with Inaccurate Binding of Dynamic Form Control Values in Angular

UPDATE: Follow this link to access the editor for my Stackblitz application, which demonstrates a simplified version of the issue regarding the "transfer" of value between the first and second controls. I am currently developing a dynamic form in Angular ...

htmlangulardomangular-reactive-forms

getJSON takes precedence over other tasks

I am having a challenge retrieving data in JSON format from the server and displaying it dynamically in a table. The code runs without errors and successfully fetches the data, but for some reason, nothing appears in the table. I suspect there may be an ...

javascriptjquerygetjson

Use PHP to include the data-visible attribute only when a certain condition is

For a project where I'm using Boot Grid table, the need has arisen to display specific columns based on the account type. My intended approach involves the use of PHP in an if statement: If account_type = "Rep", then make ID#name data-visible="false ...

phpjquery

How can I focus on a particular P element within this Div using CSS?

I am attempting to target a paragraph element within the code snippet below. I want to create a class that applies text-shadow to the text of that specific paragraph. However, I am unsure which class to focus on and what the correct syntax should be. I in ...

htmlcss

How can we determine if the first character of a text input is 'X' in JQuery when the input length is 6?

I am looking to validate an HTML text box using jQuery. The requirement is that the text box should only accept numbers when the length is 6, and if the length is 7, it must start with the letter X. <input type="text" class="stid" id="stn" name="stn" ...

jqueryforms

The video player in HTML may not be compatible with all MP4 files, as some may work while

I have included the following code for embedding mp4 videos on my website: <video class="video" controls="" width="100%" src="videopath/videoname.mp4"></video> Despite using this code for 3 videos, all in mp4 format, only one of them is funct ...

htmlspring-mvchtml5-videovideo-embedding

Discover the ultimate strategy to achieve optimal performance with the wheel

How can I dynamically obtain the changing top position when a user moves their mouse over an element? I want to perform some checks whenever the user scrolls up, so I tried this code: HostListener('window:wheel', ['$event']) onWindowS ...

javascriptcssangulartypescript

What steps do I need to take in order to create a histogram with perfect symmetry?

I am looking to create a unique JavaScript program that can generate a symmetric histogram resembling the image provided below: This program will prompt the user to input the number of bars they want to display and specify the character used to draw the b ...

javascripthtmlloopswhile-loop

continuously repeating with each press of the enter key

Whenever I focus on the input field and press enter, everything works fine. However, if I do it again, the action is repeated multiple times depending on how many times I focus. $(document).delegate(".changeValue","focus one",function(){ $(this ...

javascriptjquery

How can jQuery verify if an input value is contained within an array?

I've been attempting to verify if the value of an input field is part of an array, but for some reason it's not working. Here is my approach: var postcode1 = []; for (var i = 21000; i < 21999; i++) { postcode1.push({ val: i, text ...

javascriptjquery

The efficiency of Orbitcontrols damping is altered when combined with tween.js

I am encountering an issue with my simple scene featuring a cube. The OrbitControls tool is being used with enabled damping for smoother rotation. I have created a function to animate the camera to a new position upon clicking a button using tween.js. Howe ...

jquerythree.jstween.js

Processing made easy with jQuery

In my HTML page, I have multiple rows that represent records from a database. Each row contains input fields and a link at the end. When I click on the link, I need to capture the values of the input fields within the same row. Here is an example of the H ...

javascriptjqueryhtml

As you minimize the browser window, you may notice a white space appearing when scrolling over

Encountering an issue with my webpage where, upon minimizing the browser horizontally and causing overflow, scrolling over to view the hidden section results in a blank page. Any idea why this is happening? I have set my divs to a specific height (e.g. 9 ...

htmlcssstylesheet

Tips for utilizing numerous tables with multiple selection tags

I am struggling with a jQuery issue involving multiple container elements with the class "product-sizes". Each container contains a select option for choosing between inches and centimeters, which triggers the corresponding table display. The problem arise ...

javascripthtmljquerycssforeach

Refresh a Div using JSON content with Struts2 Jquery Plugin

Is there a way to dynamically reload the content of a div with just a specific part of a JSON object in it? The code provided works perfectly, but it displays the entire JSON object within curly braces. I want only one variable from the object to be shown ...

jqueryjsonhtmlstruts2reload

Manage the element that should receive focus() after tab is pressed from an input field

On my webpage, there is a variety of elements such as inputs and anchors. I need to specify which input field the browser should move focus to when I press the tab key while on an input. Currently, pressing tab from one specific input takes me to a menu i ...

jquerycssknockout.js

What could be causing my Angular code to submit back unexpectedly?

My goal is to make an initial call to the database to populate some dropdowns, after which all actions are done through AJAX. However, whenever I click a button on the page, it seems to be posting back and calling the function that fetches dropdown values ...

javascriptjqueryasp.netangularjsajax