CODEWITHSUNDEEP
htmllistcsshtml-lists
Christian Hadikusuma
Christian Hadikusuma

Reputation: 69

Limit row number in <li> tag to a specific number

I need to make a list that looks like this

item1  item4  item7
item2  item5  item8
item3  item6

currently I am using this particular code using <ul> and <li> tag:

<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>
   <li>item9</li>
</ul>

is there any way to limit the row number to specific value (in this case 3) and if the data exceed that specific value, the list will continue in the next column? I read column-count properties of CSS3, I also wonder if there is also row-count properties.

Upvotes: 2

Views: 5148

Answers (3)

Palla
Palla

Reputation: 1

This worked fine in Chrome, and IE 11

ul {
  display: flex;
  flex-flow: column wrap;
  max-height: 4em;
  height: 10vh;
}
<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>
   <li>item9</li>
</ul>

Upvotes: 0

vals
vals

Reputation: 64174

You can achieve this layout using a flex box approach.

You set the ul to have a height of 3 times the li, and the rest is automatic

ul {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 4em;
}
<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>
   <li>item9</li>
</ul>

Upvotes: 2

ForguesR
ForguesR

Reputation: 3618

AFAIK it is impossible without Javascript.

If you are open to a Javascript solution then here is how I would do it :

var maxRow = 3;
var lis = $("#myList li").length;
var cols = Math.ceil(lis / maxRow) + "" ;

if (cols > 1)
  for (var i = lis; i <  (maxRow * cols); i++) 
    $("#myList").append( '<li class="noBullet">&nbsp;</li>' );

$("#myList").css( { 'columns' : cols,
                    '-webkit-columns' : cols,
                    '-moz-columns' : cols } );

With this simple css rule :

.noBullet {list-style-type: none;}

This script build a grid based on the maxRow you specify. It appends invisible <li> to the list to make sure the first columns are always filled up.

You can have a look at the fiddle here.

Upvotes: 0

Related Questions