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?
Add a comment
|
4 Answers
If you don't mind using CSS3, you could always try using CSS3 multi-columns, also via A List Apart
1 Comment
Decent Dabbler
Aaahhh, good ol' A List Apart. Should have checked there first of course! :) Thanks for the pointer.
A List Apart has a good article on multi-column lists.
There are no "pretty" ways to do this with CSS I'm afraid.
Comments
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. */
}
Comments
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.
2 Comments
Decent Dabbler
Hi Arno, thanks for the answer. "only by using HTML"? How so? You mean multiple <ul> or <ol>s I presume? If so; I was aiming for a solution that utilizes only one <ul> or <ol> element. If not, then could you elaborate on it a little? Thanks.
arno
Yes, I meant multiple list. I'm quiet sure it's the most comfortable way which works in every browser. You probably could try some CSS hacks--but I don't know any and would assume they don't work in every browser.