Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

html css - how to create multiple column list?

Tags:

html

css

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. 
like image 282
anonymous Avatar asked Feb 27 '10 10:02

anonymous


People also ask

How do you make multiple columns in HTML?

More columns can be added by adding more divs with the same class. The following syntax is used to add columns in HTML. <div class="row"> tag is used to initialize the row where all the columns will be added. <div class="column" > tag is used to add the corresponding number of columns.

How do you make 5 columns in HTML?

First example: create a row ( <div class="row"> ). Then, add the desired number of columns (tags with appropriate . col-*-* classes). The first star (*) represents the responsiveness: sm, md, lg, xl or xxl, while the second star represents a number, which should add up to 12 for each row.


2 Answers

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.

like image 180
Enrico Carlesso Avatar answered Sep 25 '22 21:09

Enrico Carlesso


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

like image 20
Knu Avatar answered Sep 25 '22 21:09

Knu