Tags css style
css style
HTML
* { font-size: 12px; font-family: Verdana, Arial, Helvetica, sans-serif; } ul { list-style: none; margin: 0; padding: 0; } .clear { clear: both; } .span-2 { width: 70px; } .span-6 { width: 230px; } .container { width: 310px; padding-top: 5px; border-bottom: solid 1px #CCC; } .container .column { padding-bottom: 5px; float:left; margin-right:10px; } .container .last { margin-right: 0; } .container .label strong { color:#CCCCCC; font-weight: normal; text-transform:uppercase; } .container ul.tags li { background: url(images/tag-bg.gif) no-repeat scroll right top; display:block; float: left; height:20px; padding:0; text-transform:lowercase; padding-right: 10px; margin-bottom: 2px; margin-right: 2px; } .container ul.tags li a { background: url(images/tag-bg.gif) no-repeat scroll left top; font-size:10px; line-height:20px; display: block; padding-left: 10px; } ul.tags a { text-decoration: none; color: #FFFFFF; }
HTML
<div class="container" style="margin: 0 auto;"> <div class="column span-2 label"> <strong>Tags</strong> </div> <div class="column span-6 last tags"> <ul class="tags mar0"> <li><a href="#">sliders</a></li> <li><a href="#">clipping</a></li> <li><a href="#">drag to select</a></li> <li><a href="#">video players</a></li> <li><a href="#">video editor</a></li> </ul> </div> <div class="clear"></div> </div> <div class="container" style="margin: 0 auto;"> <div class="column span-2 label"> <strong>Tags</strong> </div> <div class="column span-6 last tags"> <ul class="tags mar0"> <li><a href="#">drag to select</a></li> <li><a href="#">sliders</a></li> <li><a href="#">clipping</a></li> <li><a href="#">video players</a></li> <li><a href="#">video editor</a></li> </ul> </div> <div class="clear"></div> </div>