格式化列表项以将其垂直排列，然后在向左浮动时水平排列

Question

Assuming I have the following html:

<ul id="a">
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
</ul>

And the following CSS:

ul#a {width:20px;}
ul#a li {float:left; width:10px;}

The current output is:

a   b
c   d

The output I'm going for is:

a   c
b   d

Is there any way to do this without breaking up the li's into two ul's?

Thanks, -Tom

Answer 1

This article from A List Apart may help you. It is from 2005 though, so it may be somewhat outdated. Still, it is somewhere to start.