Question

I have a unordered list, with each list element containing two spans (say span A and span B).
Now I need to format these so that they are placed horizontally across the screen, when span A always on top of span B.

Eg.  spanAItem1 spanAItem2 spanAItem3
     spanBItem1 spanBItem2 spanBItem3

How can I do this using some creative CSS?

Answer 1

Something like this will get you close:

ul {float: left; list-style-type:none;}
ul li {float: left; margin-right:20px;}
ul li span {display:block}

*edited to address your comment. Take it from there 🙂