Organizing and Arranging List Elements (li)

Imagine having this list:

<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>

<li>item4</li>
<li>item5</li>
<li>item6</li>

<li>item7</li>
<li>item8</li>
</ul>

How can I make it display like this on the webpage:

item1    item2    item3
item4    item5    item6
item7    item8

What's the best approach for achieving this? Can it be done easily with CSS or is there a special PHP trick?

I've received some suggestions, but they all seem similar to my own solution. However, it needs to fit within 870px and follow a specific order while also being responsive due to using bootstrap. Any help would be greatly appreciated. Thank you.

htmlcss

Answer №1

Do you think just applying the following CSS styles would suffice?

ul{
    width: 870px;
}
li{
    width: 33.33%;
    float: left;
}

The author chose 870px as the width based on the question, but any other value could be used instead.

Answer №2

To improve the layout, adjust the width of the unordered list

<style>
ul{
  width: 30em;//<<<
}

ul li{
  float: left;
  width: 10em;
}
</style>
<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
    <li>item5</li>
    <li>item6</li>
    <li>item7</li>
    <li>item8</li>
</ul>

View it live here:http://jsfiddle.net/zsLUa/

Answer №3

In order to showcase only 3 items per row, utilizing css :nth-child is the best solution:

li:nth-child(3n-1) {
   clear: both;
}

Keep in mind that this method may not be compatible with IE8 and earlier versions

If you still require support for IE8 and IE7, consider incorporating some javascript/jQuery code:

if (document.all && !document.querySelector || document.all && document.querySelector && !document.addEventListener) {
   $("li").each(function (index) {
      if (index % 4 === 0)
         $(this).css('clear', 'both');
   });
};

Answer №4

CSS has a lot of interesting features worth exploring. Check out this article for more information: .

Answer №5

Check out this website

I trust you will find it beneficial

Answer №6

One option to explore is utilizing an HTML table without any visible borders.

Answer №7

I've found this CSS to be effective for my needs. Feel free to adjust the widths as necessary.

  ul
  {
    width: 500px;
  }

  li
  {
      display:inline-block;
      width: 160px;
  }

Check out a live demonstration here.

Answer №8

Another option could be to use columns.

ul{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
}

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

Calculating the total of all values in a table

For my ngFor loop, the invoice total is calculated based on price and hours, but I also want to calculate the totals of all invoices in the end. <tr *ngFor="let invoice of invoiceItem.rows"> <td>{{ invoice.rowName }}</td> <td& ...

htmlangulartypescript

Is it possible to merge elements into a carousel in the mobile display?

I have a collection of elements that I would like to combine into a swipeable carousel. Is there a way to achieve this, specifically to make it a carousel only in mobile view? If needed, here is the HTML code. Thank you for your assistance. <div class= ...

htmlcssbootstrap-4slidercarousel

What is the best way to position text below an image icon in a menu?

I am having trouble creating a menu that has the same style as shown in this image: . Unfortunately, my menu ends up looking like this instead: . Can someone please help me fix this issue? Here is the HTML code I am working with: <header> ...

htmlcssmenu

How to efficiently display information from a MySQL database onto textboxes using AJAX, and successfully repeat the process within the same PHP webpage

How can I retrieve and display data in textboxes from a MySQL database using Ajax, specifically when needing to do so twice within the same form in PHP? The first database table, names, includes: guid id name 1 101 ...

phphtmlmysqljson

Trouble with "data-bs-dismiss" functionality in Bootstrap 5

I am faced with an issue involving two modals. My goal is to have the "Novo Avatar" button close the modal with the ID #modal_debug and then open the modal #modal_newAvatar. However, instead of closing the current modal, it simply opens the new one on top. ...

htmlbootstrap-5

Glitch Uncovered in Excel Spreadsheet I Exported

I have a situation where I am working with an HTML table that includes both text and radio buttons. The issue arises when I attempt to export the table data along with the selected radio button values to Excel using the 'Export to Excel' button. ...

javascriptjqueryhtmlcssexcel

The enigmatic appearance of CSS border-image using a transparent image creates a visible edge when viewed

My website, located at , features a unique design element created using the CSS border-image property and a .png image with a transparent edge, giving the appearance of torn paper on the divs. However, I have encountered an issue specifically on my Android ...

androidcsstransparencyborder-image

Fixing the Jquery animation glitch triggered by mouseover and mouseout

In my project, I have implemented a small mouseover and mouseout functionality. The challenge I am facing is that I need to keep the mouseout function using animate() instead of css() for specific reasons. The issue arises when I quickly do a mouseover fo ...

javascriptjqueryhtmlcssanimation

Show the res.send() method from express.js without replacing the existing html content

Currently, I am in the process of developing a calculator application using express.js. The app needs to handle get requests for an HTML file and post requests that capture user input and provide the response accurately. My challenge lies in showcasing the ...

javascripthtmlnode.jsexpress

How can I retrieve the contents of input fields and showcase them in a dialog box?

<dialog> label id="show" label label id="show1" label </dialog> var x = document.getElementById("name").value; x = document.getElementById("show").innerHTML; var y = document.getElementById("matrix").value; y = document.getElementById("sho ...

javascripthtml

Expand the background of columns to cover grid gutters

Imagine this... You're working on a layout with three columns, all within a fixed-sized container that is centered using margin:0 auto. The design requires the first column to have a background color that reaches the left edge of the browser window. ...

cssfrontendcss-grid

I am looking for a way to implement the :active state on external controls for jcarousel

I am currently using a Jcarousel and I need to assign the class "active" to the current pagination option. I have come across similar inquiries regarding this matter. <script type="text/javascript"> /** * The initCallback callback is used * to add ...

javascriptjqueryhtmlruby-on-rails

Experiencing problems with the CSS on the Login page and have yet to find a solution

Description:- I encountered an issue with my HTML login page where I used an image for the username and password. Everything worked fine when I manually typed in the username and password, but when I selected the username from the auto-fill suggestions pop ...

htmlcss

Learn the method for switching between exclusive visibility using Bootstrap class toggles

I've set up a jQuery function that toggles the visibility of different divs when clicking on folder icons: $(document).ready(function() { $("#techfolder").click(function(){ $("#txt").toggleClass("d-none"); }); $("#persfolder").click(functio ...

jquerycsstwitter-bootstrap

Adjust image size to maintain consistent dimensions

Is there a way to resize the images so they maintain the same aspect ratio? Currently, all the images are appearing distorted. https://i.sstatic.net/czpto.png Here is the HTML code for the card: <div class="container"> <div class="flex- ...

htmlcss

Any tips on showing inline input within an li element?

HTML Code: <div id="choices"> <ul> <li> <label for="input_size">Input Size</label> <input type="text" id="input_size"> </li> <li> ...

htmlcss

JavaScript Functions for Beginners

I'm currently facing some challenges with transferring the scripts and HTML content from the calendar on refdesk.com. My task involves moving the JavaScript to a separate stylesheet and utilizing those functions to replicate the calendar on an HTML pa ...

javascripthtmlcalendar

What method can be employed to eliminate choice selection lacking any value?

Currently, I am encountering difficulties in my attempt to remove or hide the first option value from a ransack code. Would you be able to assist me in addressing this concern? Here is the HTML CODE that I am working with: <select id="q_c_0_a_0_name" ...

javascriptjqueryhtmlransack

Guide on interpreting unordered lists and returning the outcome to Java

The xhtml-file provided below showcases a structure for content creation: <ui:composition xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" temp ...

javajavascripthtmljsf

When I include a class in a checkbox label, the CSS ceases to function properly

Apologies for my lack of understanding, but I am facing an issue with applying an attribute to a label element with class "c". It seems to work fine with other objects, like buttons, but not with labels. I cannot figure out why such a simple thing is not w ...

htmlcss