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 implementsclear: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 li
s 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.
精彩评论