CODEWITHSUNDEEP
htmlcss
Señor Reginold Francis
Señor Reginold Francis

Reputation: 16906

HTML Unordered List CSS

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?

Upvotes: 1

Views: 791

Answers (3)

neatlysliced
neatlysliced

Reputation: 245

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.

Upvotes: 1

Joel A. Villarreal Bertoldi
Joel A. Villarreal Bertoldi

Reputation: 8017

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

Upvotes: 2

Kenan Banks
Kenan Banks

Reputation: 211982

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

Upvotes: 5

Related Questions