How to modify the orientation of a
spanning multiple columns?
I am producing a
<ul> of alphabetically sorted items, which spans over multiple lines. An example of this can be seen here:
currently the list is laid out horizontally, as follows:
a b c d e f g h i j k l
But clients being clients, I have now been asked to change this so that the list is vertically oriented, as follows:
a e i b f j c g k d h l
Unfortunately I don't know how to do this in the nice and tidy way that I've originally done it.
Can somebody please fill me in if this is possible to do with single
<ul> and CSS? Or do I have to make multiple lists?
You can't do it by only changing CSS.
Well, you can if you don't care about IE: http://caniuse.com/#search=multiple%20column
You have to compromise somewhere:
- Split the
- As hinted at by @PeeHaa, use server-side code to change the order that the
<li>s are output (but still keep them inside one
<li>s. I did this using jQuery here, but it would probably make more sense to use a plugin like this: http://welcome.totheinter.net/columnizer-jquery-plugin/