FLOATING LIST ITEMS

Floating List Items

In the example above the links have different widths.

For all the links to have an equal width, float the <li> elements and specify a width for the <a> elements:

Example

li
{
float:left;
}
a
{
display:block;
width:60px;
}

Example explained:

• float:left - use float to get block elements to slide next to each other
• display:block - Displaying the links as block elements makes the whole link area clickable (not just the text), and it allows us to specify the width
• width:60px - Since block elements take up the full width available, they cannot float next to each other. We