HTML list item order

I want to automatically limit the height of the HTML list based on the parent height. Is it possible for the list to clearly overflow, but place the overflows next to each other and keep iterating from there? The list is dynamic, so the number of items in the list can be 1 or 100.

I know every third element reaches the maximum height of the element, so I can use the nth-child () selector. I prefer to do it in a more elegant way.

For example:

li 1    li 4    li 7
li 2    li 5
li 3    li 6

      

+3


source to share


1 answer


If your list items are filled dynamically then you have to use loops (php), you can also play with the css nth-child () selector.

Use this if you know exactly how many list items you have.



   ul {
    columns: 3;
    -webkit-columns: 3;
    -moz-columns: 3;
   }

      

0


source







All Articles