开发者

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 spanB开发者_StackOverflow中文版Item2 spanBItem3

How can I do this using some creative CSS?


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


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


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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜