Reputation: 1528
In a ul
element, is it possible to have list items automatically move to the right when overflowing? For example, say that there is an unordered list with a height of 300px
. The total height (border + padding + margin included) of a list element is 60px. If there are, say, 4 list elements, they are listed top to bottom. But is it possible to make extra list elements start on a new column? For example, if there were six, put one on a new column to the right? I have tried researching this, and found nothing. Maybe it has to do with display
?
Upvotes: 0
Views: 102
Reputation: 67814
You could define the ul
as a flex container with the settings shown below
ul {
max-height: 300px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
li {
box-sizing: border-box;
flex-grow: 0;
height: 60px;
border: 1px solid #ddd;
}
<ul>
<li>bla bla</li>
<li>bla bla</li>
<li>bla bla</li>
<li>bla bla</li>
<li>bla bla</li>
<li>bla bla</li>
</ul>
Upvotes: 3