What about
li { display: inline; margin-left: 15px; margin-right: 15px; }
rahul
2009-09-25 09:22:25
+1
A:
Thought of that mate, but it won't do the trick, 'cause they stack horizontally instead of vertically, that's why I gave a reference the list-view.
panosl
2009-09-25 09:30:43
In SO they have implemented this in separate td in a table.
rahul
2009-09-25 09:33:17
A:
Floating them might also help. It just depends. You'll probably want a width applied if you want them in columns
li {float:right; width:20em;}
don't forget to clear the float!
asgeo1
2009-09-25 09:26:53
Almost there :) It's pretty close, though there's an issue. The list is alphabetical, and by floating them, instead of reading them by column, you're reading by row (ie, I jump columns, instead of reading vertically, then moving to the 2nd column etc).
panosl
2009-09-25 09:50:01
Alas, if you want the sorting to be in vertical columns, then this is not possible in CSS (that I am aware of).I have heard of someone writing a javascript to dynamically reorder the <li> elements, and *then* apply the float. But this does not seem like a good idea to me.I would just use a table if you needed vertical sorting.I heard they were going to improve the CSS spec in the future so you could do vertical column sorting of list elements - it is a pretty common way of laying out data after all.
asgeo1
2009-09-25 10:05:36
Indeed :) n1313's answer is the closer it gets, as his links points out, we can abuse the browser specific markup (-moz and -webkit).
panosl
2009-09-25 11:10:06
+1
A:
CSS3 multi-column layouts is your solution. Unfortunately, they are not widely implemented yet.
n1313
2009-09-25 10:23:41
Thanks mate, it seems the browser specific markup is as close as it get for now. Let's hope people are *smart* enough to use a neat browser moz or webkite based :D
panosl
2009-09-25 11:11:15