I have a list of items that I want to fit in a space that is constrained vertically:
<ul> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> <li>Five</li> <li>Six</li> </ul>
Since I don't want the list to have more than a specific height, but I'm free to expan it horizontally, I want to divide the list into columns, like this:
One Two Three Four Five Six
Or, alternatively (in my case order is not important)
One Three Five Two Four Six
The css property
column-count allows to break a list into columns, but it only accepts a fixed number of columns. I don't know the number of items I am going to have (it can go from 1 to more than 40), so if I set the number of columns to 3, any list with more than 6 items will be too high, and if there is only 4 items, then only the first column will have two items and it will look uneven.
So, ideally I would need a
I tried something:
float:left on every
li puts the list in one row. To break it into two rows, I would need to not apply
float:left to the N/2 element. I don't know how to do that.
I know also that I can do it by breaking it into multiple
ul, each one with two
float:left them, but I would like to avoid messing the HTML for something entirely presentational.
Does someone has a solution for this problem?
Edit: I think I have not been clear in explaining my requirements. I want the list to be sorted into columns without knowing how many items I'm going to have, and so that I will always have two rows.
So for example with 7 items, I want to have:
One Two Three Four Five Six Seven
And with 3 items:
One Two Three