Clever Geek Handbook

(x) html / css: list items arranged in columns

Is there a CSS way for a single list (ul or ol) to behave like this:

1.    4.    7.
2.    5.    8.
3.    6.    9.

In other words, so that their subsequential elements are distributed across columns?

+2


source to share


4 answers


If you don't mind using CSS3, you can always try using multiple CSS3 columns, also via A List Apart



+3


source


A List Apart has a good article on multi-column lists .



There is no "good" way to do this with CSS. I'm afraid.

+1


source


I would echo what James Goodwin says , but include CSS browser support in CSS:

ol {
    column-count:3;
    column-width:33%;
    -moz-column-count:3;
    -moz-column-width:33%;
    -webkit-column-count:3;
    -webkit-column-width:33%;        
    /* etc., etc. */
}
+1


source


You cannot do this with CSS, but only with HTML. You can of course use a script language to create columns automatically, but CSS doesn't support that.

0


source






More articles:


All Articles