Tutorial 6 - Floating inline list items

Step 4 - Display inline

To force the list into one line, apply "display: inline;" to the "LI". To target the specific list we use "ul#navlist li". This means we want to target the LI element within the UL, styled with a ID called "navlist".

Go to Step 5 →


CSS CODE
ul#navlist
{
padding: 0;
margin: 0;
list-style-type: none;
}

ul#navlist li { display: inline; }

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