This page is an example of a flat tool bar or button bar. The buttons are separated by add a small margin to the #ButtonBar ul li a selector. The bar is also responsive and will wrap as the browser size shrinks. Here is what the toolbar looks like.
Code
Here is the code. Note a <div> is used to turn off the float.
6 <div id="FlatButtonbarExample">
7
8 <style>
9 /* ButtonBar */
10 /* Nav Buttons
11 Navigation at top of each page
12 */
13 #ButtonBar ul { padding-left: 0; margin: 0em auto 1em auto; color: black; float: left; width: 90%; font-family: Arial, Helvetica, sans-serif; }
14 #ButtonBar ul li { display: inline; }
15 #ButtonBar ul li a { padding: 0.4em 1.1em; background-color: #A4A4A4; color: Black; text-decoration: none; float: left; margin:2px 1px 1px 1px; }
16 #ButtonBar ul li a:hover{ background-color: gray; }
17
18 </style>
19
20
21 <div id="ButtonBar">
22 <ul>
23 <li><a href="">Home</a></li>
24 <li><a href="">CSS</a></li>
25 <li><a href="">HTML</a></li>
26 <li><a href="">Apple</a></li>
27 <li><a href="">Java</a></li>
28 <li><a href="">JavaScript</a></li>
29 <li><a href="">PHP</a></li>
30 <li><a href="">Web</a></li>
31 </ul>
32 </div>
33 <div style="clear:both;"></div>
34 </div>