Tutorial 6 - Floating inline list items

Step 5 - float the "a" state

When list items are converted to inline, they have a set amount of padding on their left edges that cannot be removed. To make the list items sit beside each other without any gap, they must be set to "float: left". At this stage we cannot see that the gap has closed.

A width is also required when floating an element - unless it is an image.

Go to Step 6 →


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

ul#navlist li { display: inline; }

ul#navlist li a
{
float: left;
width: 5em;
}

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