How to display a list in horizontal groups of li elements?

Brian J Published at Dev

Brian J

I have a very long list of li elements greater than 30 items. When I display this in a ul menu dropdown the list stretches down vertically which requires the browser window to be scrolled down to view every list element.

I'd like to do is group each row in the list to display 3 li elements instead of one per row in the ul menu.

what I did try is setting the style .sub-menu li used by the menu to display: inline as suggested here to display the li elements inline but that made no difference to the ordering horizontally.

So instead of this:

Jim
Jane
Jack
Jones
Jackson
Jhonny

It would display like this (where each three li elements in the list is grouped horizontally):

Jane John Jared

Jim James Jones

Question:

How can you display a list in horizontal groupings of n li elements?

In my current setup I use this CSS for the menu:

nav li:hover .sub-menu {
    z-index: 2;
    opacity: 1;
    min-width: 100px;
}

.sub-menu {
    width: 100%;
    padding: 0px 0px;
    position: absolute;
    top: 100%;
    left: 0px;
    z-index: -1;
    opacity: 0;
    overflow: hidden;
    transition: opacity linear 0.15s;
    box-shadow: 0px 2px 3px rgba(0,0,0,0.2);
    background: #425563;
    text-align: center;
    display: inline-block;
}

    .sub-menu li {
        display: inline-block;
        font-size: 15px;
        float: left;
        margin-top: 0px;
    }

        .sub-menu li a {
            padding: 10px 5px;
            display: block;
            text-decoration: none;
            text-align: left;
            z-index: 3;
        }

            .sub-menu li a:hover, .sub-menu .current-item a {
                background: #01a982;
                -moz-box-shadow: 0 0 5px 0px #888;
                -webkit-box-shadow: 0 0 5px 0px #888;
                box-shadow: 0 0 5px 0px #888;
                color: #000;
            }


            .sub-menu li a input {
              display: inline-block;

            }

And this is the ul list which uses the sub-menu css style:

                <ul class="sub-menu" id="assetNameMenu">
                   @* li elements created in script *@
                </ul>

Paulie_D

Floats can do this quite simply.

You just clear the float after every this li

ul {
  list-style-type: none;
}
li {
  float: left;
  padding: 0 1em;
}
li:nth-child(3n+1) {
  clear: both;
}

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
  <li>Item 8</li>
  <li>Item 9</li>
</ul>

For inline-block there is an similar option as detailed in the answer to this question by @phrogz

ul {
  list-style-type: none;
}
li {
  display: inline;
}
li:nth-child(3n)::after {
  content: "\A";
 white-space: pre;
  ;
}

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
  <li>Item 8</li>
  <li>Item 9</li>
</ul>

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2021-03-4

Comments

0 comments

From Dev

How to create a list of the autocomplete <li> elements when parent <ul> element contains the attribute style="display: none;" through Java Selenium

From Dev

Related Related

Article