html css - how to create multiple column list?

Question

I have an "Ordered List" which contains about 100 "List Items". This ol makes my page very long and users have to scroll too much.

How can I get the UL to show like this:

1.           6.           11. 2.           7.           12. 3.           8.           13. 4.           9.           14. 5.          10.           15. 

Answer 1

If for you don't care about the vertical order, but only the layout:

1.      2.      3.       4. 5.      6.      7.       8. 9.      10.     11.      12. 

You can simply set the li elements this way:

li {     display: block;     width: 25%;     float: left; } 

It should work. If you need to have them in vertical order you need to act in the php script dividing them into separate divs and then float them.

Answer 2

You could use css3 column module but beware that it is not fully supported on all web browsers.