If you use inline to list link items, the links have different widths. For all the links to have an equal width, you must float the <li> elements and specify a width for the <a> elements. To do this, we use "display: block;", which displays the links as block elements, making the whole link area clickable (not just the text part). This also allows us to specify the width. By default, block elements take up the full width available, so they cannot float next to each other. Hence, we need to specify the width of each links by using "width: 75px;". The "float: left;" gets the block elements to slide next to each other, now that the width is small enough to enable this to happen:
| HTML file: | Displayed by browser: |
|---|---|
|
<style>
ul { list-style-type: none; margin: 0; padding: 0; } li { float: left; } a { display: block; width: 75px; background-color: #ffff80; } </style> <body> <ul> <li><a href="#">Home</a></li> <li><a href="#">News</a></li> <li><a href="#">Contact</a></li> <li><a href="#">About</a></li> </ul> </body> |
