HTML Unordered List CSS

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 :)

Answer 2

Following Triptych's response:

• Be sure to add a <br clear="all" /> or a <div style="clear: both"></div> or anything that implements clear:both behaviour after the </ul> tag.

• To remove the bullets, use the list-style-type property:

ul {float: left; list-style-type: none;}

• To add more space between elements, use the margin property:

ul li {float: left; margin: 10px;}

Answer 3

To add on to @Joel Alejandro and @Tryptych, if you set a width to the ul, the lis will wrap to the next line. However, IE6 will not wrap properly, so if older browsers are a concern, adding a class of "row" to the element at the beginning of every row along with .row{clear:both} will be the best solution, as @Joel Alejandro noted.