Tutorial 6 - Floating inline list items

Step 8 - Removing text decoration

At this point you may wish to remove the text underline. It is common practice for navigation not to have underlines as their placement and other feedback mechanisms make them more obviously links. However, you should be aware that modifying standard hyperlink behaviour (such as underlines) can be confusing for some users, who may not realise that the item is a link.

Go to Step 9 →

padding: 0;
margin: 0;
list-style-type: none;

ul#navlist li { display: inline; }

ul#navlist li a
float: left;
width: 5em;
color: #fff;
background-color: #036;
padding: 0.2em 1em;
text-decoration: none;

<ul id="navlist">
<li><a href="#">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
Other Max Design articles and presentations
Associated with webstandardsgroup.org