CSS : 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.   

                     Other Topics


CSS : MEDIA,CSS::STYLING FORMS, mechanical Engineering, English books,Photoshop tutorials,Harry potter,Best 100 english books,Mechanical-old-question-paper,STYLE HTML ELEMENTS WITH SPECIFIC ATTRIBUTES,CSS : HORIZONTAL NAVIGATION BAR,CSS : FLOATING LIST ITEMS,CSS : IMAGE GALLERY,CSS : NAVIGATION BARS,CSS : VERTICAL NAVIGATION BAR,CSS : LIST OF CSS PSEUDO CLASSES

•