Styling Lists - Pro CSS Techniques - page 258

#tablinks ul,#tablinks li {
padding:0;
margin:0;
list-style:none;
}
#tablinks li {
float:left;
}
...
<div id="tablinks" class="clearfix">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/travel/" class="current">Travel</a></li>
<li><a href="/flights/">Flights</a></li>
<li><a href="/hotels/">Hotels</a></li>
<li><a href="/late-deals/">Late Deals</a></li>
</ul>
</div>
The result doesn't look all that great yet—it's still basic in appearance, as Figure 12-4 shows,
but the orientation is correct and the padding has been reset.
Figure 12-4. The flattened list of links—all ready for a lick of paint!
Now that we've removed all the nasty browser defaults, we're once again on a level playing
field and we can look at applying a few cosmetic touches. The CSS that follows is almost
exactly the same as the CSS in Chapter 8 that we applied to the div elements. We'll apply
a background image, a border to the right of each list item, and some padding (which is
applied to the anchors inside the list items):
#tablinks ul,#tablinks li {
padding:0;
margin:0;
list-style:none;
}
#tablinks li {
float:left;
}
#tablinks {
background:#336868 url(tab-bg.gif) repeat-x top;
}
#tablinks li {
float:left;
border-right:1px solid #094747;
}