Float a Horizontal Menu

In this example, the use of the float property with a list of hyperlinks creates a horizontal menu:

HTML file: Displayed by browser:
<style>
ul {
    float: left;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style-type: none;
}
a {
    float: left;
    width: 6em;
    text-decoration: none;
    color: white;
    background-color: purple;
    padding: 0.2em 0.6em;
    border-right: 1px solid white;
}
a:hover {
    background-color: fuchsia;
}
li {
    display: inline;
}
</style>
<body>
<ul>
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
</ul>
<br />
<p>In the horizontal menu above, we let the UL element and the A element float to the left. All LI elements are displayed as inline elements, which causes no line break before or after the element, forcing the list to be on one line. The UL element has a width of 100% and each hyperlink in the list has a width of 6em (6 times the size of the current font). The colors and borders are added to make it more fancy.
</p>
</body>














In the horizontal menu above, we let the UL element and the A element float to the left. All LI elements are displayed as inline elements, which causes no line break before or after the element, forcing the list to be on one line. The UL element has a width of 100% and each hyperlink in the list has a width of 6em (6 times the size of the current font). The colors and borders are added to make it more fancy.

I lowered the display on the right side, so that it's easier to read the style and the html coding.

Back button Table of Contents Next button