Styling a list using multiple columns with CSS

My goal is to design a columned list using only HTML and CSS. I have experimented with floats and inline-block, but it seems like inline-block is the best option for me due to these specific requirements:

  • The layout must be in columns;
  • The number of columns should adjust automatically;
  • The height of the columns can vary, but the width may be fixed if needed.

The issue arises when the heights of the list items differ, causing gaps between them instead of aligning directly below one another.

This is how my structure looks:

CSS

.columnlist li {
    display:inline-block;
    vertical-align:top;
}

HTML

<ul class='columnlist'>
    <Li><H6>List 1 of 4</H3>
    <UL><LI>List item 1</LI>
        <LI>2ND List Item</LI>
        <LI>Item in List 3</LI>
        <LI>Final Item</LI></UL></LI>
    <Li><H6>List 2 of 4</H3>
    <UL><LI>Penultimate LI</LI>
        <LI>Final Constituant</LI></UL></LI>
    <Li><H6>List 3 of 4</H3>
    <UL><LI>Opening Movement</LI>
        <LI>Closing Component</LI></UL></LI>
    <Li><H6>List 4 of 4</H3>
    <UL><LI>Original Child</LI>
        <LI>2nd Element</LI>
        <LI>Then the 3rd</LI>
        <LI>And Last But Not Least</LI></UL></LI>
</UL>

Is there a way to eliminate the vertical space around the elements using CSS?

Note: While I believe this approach might solve the issue, are there alternative methods to achieve the same result? Multi-column CSS lists

Answer №1

Let's first take a look at your code before incorporating my CSS:

.columnlist li {
    display:inline-block;
    vertical-align:top;
}
<ul class=’columnlist’>
    <Li><H6>List 1 of 4</H3>
    <UL><LI>List item 1</LI>
        <LI>2ND List Item</LI>
        <LI>Item in List 3</LI>
        <LI>Final Item</LI></UL></LI>
    <Li><H6>List 2 of 4</H3>
    <UL><LI>Penultimate LI</LI>
        <LI>Final Constituant</LI></UL></LI>
    <Li><H6>List 3 of 4</H3>
    <UL><LI>Opening  Movement</LI>
        <LI>Closing  Component</LI></UL></LI>
    <Li><H6>List 4 of 4</H3>
    <UL><LI>Original Child</LI>
        <LI>2nd Element</LI>
        <LI>Then the 3rd</LI>
        <LI>And Last But Not Least</LI></UL></LI>
</UL>

After applying my CSS, all vertical spacing is eliminated and each level of list items now appears in its own 'column':

.columnlist li {
    display:inline-block;
    vertical-align:top;
}
ul, li, h6 {
    margin: 0;
    padding-top: 0;
}
<ul class=’columnlist’>
    <Li><H6>List 1 of 4</H3>
    <UL><LI>List item 1</LI>
        <LI>2ND List Item</LI>
        <LI>Item in List 3</LI>
        <LI>Final Item</LI></UL></LI>
    <Li><H6>List 2 of 4</H3>
    <UL><LI>Penultimate LI</LI>
        <LI>Final Constituant</LI></UL></LI>
    <Li><H6>List 3 of 4</H3>
    <UL><LI>Opening  Movement</LI>
        <LI>Closing  Component</LI></UL></LI>
    <Li><H6>List 4 of 4</H3>
    <UL><LI>Original Child</LI>
        <LI>2nd Element</LI>
        <LI>Then the 3rd</LI>
        <LI>And Last But Not Least</LI></UL></LI>
</UL>

If there is a specific outcome you were aiming for, please feel free to share it with me so I can adjust my response accordingly.

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

Missing Overlay in jQuery UI Dialog

I have integrated the jquery ui dialogue into my asp.net mvc application. I customized the styles related to ui dialogues by copying and modifying them. For the overlay, I used the following style: .ui-widget-overlay { background: #666666 url(im ...

Steps to create an automatic submission feature using a combobox in HTML5 and then sending the retrieved data back to the HTML file

Here is the code snippet I've been working on: <strong>Station Name</strong> <!--This portion includes a combobox using HTML5 --> <input type=text list=Stations> <datalist id=Stations> <option>Station1</opt ...

Issue with opacity transitions in Chrome on React application

I am currently developing a pomodoro clock using React. My goal is to have the message text (e.g. "Set a time", "Focus," etc.) and the play/reset button fade out and in when the play/reset button is pressed. So, when the play button is clicked, "Set a time ...

Error alert: The $ symbol is not defined

I followed a tutorial to create an auto-advancing slideshow in JavaScript/jQuery and it worked perfectly on jsfiddle. However, when I transferred everything to Dreamweaver, it stopped functioning. I have triple-checked that all the necessary files are link ...

Choosing comparable choices from the drop-down menu

I am working on a dropdown menu that contains different options. I need to use jQuery to automatically select the option that corresponds to the branch of the currently logged in user. However, when some option text is very similar, it causes an issue. // ...

Ways to show alternative data from a database in Laravel 8

I am working on a project where I need to display additional data based on the option selected from a dropdown menu populated from a database. Can anyone guide me on how to achieve this using javascript or jquery? https://i.stack.imgur.com/k3WLl.png Belo ...

What Is Preventing Fields from Being Filled in the Drop-Down Menu?

Looking to achieve this outcome: https://jsfiddle.net/nstruth/t0dopzav/1/ The issue I'm facing is that the HTML appears correctly when Volvo is selected, but the JavaScript is not functioning as expected. Despite reviewing similar innerHTML JavaScrip ...

Is it possible to create a CSS grid with a varying number of columns?

I recently set up a webpage with a CSS grid that centers the main section at 80% width. <html> .... <body> <main> <section> </section> </main> </body> .... </html> main { display: grid; j ...

Tips on updating a specific value within an element stored in an array

I'm currently in the process of setting up a table where each row contains unique values. Using a for loop, I am able to generate these rows and store them in an array. Now, my question arises when I consider modifying a particular value with the id " ...

Receiving an empty response for the radio button selected

Having some trouble retrieving the checked radio button in my PHP via Post method. Despite using validation and submitting the form through JavaScript, I'm not getting any value. Can anyone point out where I might be messing up? Let me know if you nee ...

Attempting to align navigation bar in the middle of the page

I'm facing some issues with centering the navigation bar on my website. I attempted to use a wrapper div to center it, but unfortunately, it didn't work out as expected. The only thing that seems to be working within that div is adjusting the lef ...

Alignment of a Definition List with Omissions of Definitions

Often, I come across applications with forms containing optional fields. In the Show view, these fields tend to "collapse" together and lose alignment with their corresponding labels. For instance, if I have 3 fields that should be displayed as: Phone: 3 ...

What are some solutions for adjusting this sidebar for mobile devices?

My mobile version sidebar is not functioning properly on my website. To see the issue, you can visit Zinexium. As I am new to HTML, I don't know how to fix it. Here is a link to the code. Thank you! <!DOCTYPE html> // Code snip ...

A step-by-step guide on utilizing jQuery to cyclically change the background color of elements upon clicking, and resetting the colors upon clicking another element

So I've been working on a solution to change the background color for accessibility purposes on a client's website. To achieve this, I have a set of div elements with different background colors and I'm using jQuery to update the body backgr ...

Guide to displaying a pop-up modal containing text and an image when clicking on a thumbnail image

Recently delving into Bootstrap 3, I created a thumbnail grid showcasing images related to various projects. My goal is to have a modal window pop up when clicking on an image. Within the modal, I want to display the selected image alongside some descrip ...

Position a div element on top of Google Maps to create a floating

Currently working on a website and attempting to add shadows over Google Maps by using a <div> element for a shadow effect: Unfortunately, the desired effect is not being achieved. This is the current CSS code in use: html { height: 100% } body ...

Tips for Implementing Color-coded Manchu/Mongolian Script on Your Website

My journey began with a seemingly straightforward task. I had a Manchu word written in the traditional script and I wanted to change the color of all the vowels in the word (ignoring ligatures). <p>ᠠᠮᠪᡠᠯᠠ ᠪᠠᠨᡳᡥᠠ</p> < ...

The React modal refuses to disappear, stubbornly clinging to the original component it sprang from

Hey there, I'm a beginner in learning React and I'm encountering an issue with my popup modal component. Even after showing the modal, I can still interact with and click on the main UI elements. Can anyone assist me with this problem? https://i ...

Ways to keep the footer at the bottom of the page without relying on the fixed positioning method

I’ve been tackling a responsive design issue on my website but I can't quite get the footer to stick at the bottom of the page. The 'fixed' property hides half of my text on mobile devices, so I turned to this solution (https://getbootstra ...

Toggle visibility of anchor tags on screens with lower resolution

Looking for help with my code <div id="contact-buttons-bar" class="slide-on-scroll" data-top="250px" style="left: 0px;"> <button class="contact-button-link show-hide-contact-bar" style="left: 0px;"> <a class="contact-button-link cb-ancor f ...