There are two ways to create a horizontal navigation bar. Use inline or floating list items.
If you want the link to have the same size, you must use the Float method.
1. One way to build a horizontal navigation bar is to set the <li> element as an inline element:
Display:inline; -The,<li> element is a block element by default. Here, we remove the line breaks before and after each list item so that they appear in a row.
2. Float the list items
In order for all links to have equal width, float <li> element and specify the width of the <a> element:
Li
{
Float:left;
}
A
{
Display:block;
width:60px;
}
Float:left-use float to slide the block elements toward each other.
Display:block-displaying links as block elements makes the entire link area clickable (not just text), but also allows us to specify the width.
width:60px-because the block elements occupy all available widths by default, the links cannot slide to adjacent to each other. We need to specify a width of 60 pixels.
CSS uses floats to create first page with header, footer, left directory, and body content