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

Question

Hi all,

Is there a way, with the help of CSS, to let a single list (ul or ol) behave like this:

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

In other words, have their subsquent elements be distributed in columns?

Answer 1

You can't do this by CSS but only by using HTML. Of course you could use a script language to create columns automatically, but CSS doesn't support this.

Answer 2

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

There are no "pretty" ways to do this with CSS I'm afraid.

Answer 3

If you don't mind using CSS3, you could always try using CSS3 multi-columns, also via A List Apart

Answer 4

I would echo what James Goodwin says, but include browser vendors experimental CSS support in your 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. */
}