How to modify the orientation of a <ul> 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:

http://jsfiddle.net/H4FPw/1/

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 don't have to use multiple lists, just some matrices math.

I took a stab at it here so as long as initially it's alphabetically ordered horizontally and row and column is known, you can transform it with jQuery.

http://jsfiddle.net/H4FPw/12/

Edit: Oh yeah, I added an id="place" attribute to the <ul>.

---

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 <ul> into three <ul>s manually.
• 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 <ul>).
• Use JavaScript to reorder the <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/

---

I'd use CSS3 columns or JavaScript. IDK if it's possible by CSS2.

---

If you're doing it in PHP you can use a simple counter and %. I've managed to accomplish this in WordPress getting a list of custom taxonomies like so:

<div class="row gutters">

    <?php $taxos = get_categories ( array( 'taxonomy' => 'make' ) ); ?>

    <?php $count = 0; ?>

    <div class="col col_2">

        <ul>

            <?php foreach( $taxos as $tax ) : ?>

                <li><a href="/make/<?php echo $tax->slug; ?>"><?php echo $tax->name; ?></a></li>

                <?php $count++; ?>

                <?php if( $count % 5 == 0 ) echo '</div></ul><div class="col col_2"><ul>'; ?>

            <?php endforeach; ?>

        </ul>

    </div>

</div>

You can also loop through an array and acheive the same thing. Output looks something like:

a    f
b    g
c    h
d    i
e    j