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?

Kenan Banks · Accepted Answer · 2010-01-19 17:33:03Z

5

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

edited Jan 19, 2010 at 17:33

answered Jan 19, 2010 at 17:25

Kenan Banks

213k36 gold badges160 silver badges176 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mkkt Bkkt Over a year ago

float:left elements without a clear:both before closing the parent element (</ul> in this case) will yield funny results so you must be careful with that.

Señor Reginold Francis Over a year ago

Thats pretty close to what I need. i just need to remove the bullets themselves, and add more space between elements. How can I do that?

Joel A. Villarreal Bertoldi · Accepted Answer · 2010-01-19 17:34:48Z

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;}

answered Jan 19, 2010 at 17:34

Joel A. Villarreal Bertoldi

8,0478 gold badges37 silver badges51 bronze badges

Comments

neatlysliced · Accepted Answer · 2010-01-19 19:11:25Z

1

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.

answered Jan 19, 2010 at 19:11

neatlysliced

2451 silver badge5 bronze badges

Collectives™ on Stack Overflow

HTML Unordered List CSS

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related