There are two ways to create a horizontal navigation bar. Using inline or floating the list items will both work, but if you want the links to be the same size, you must use the floating method. First, we will demonstrate the inline method:
| HTML file: | Displayed by browser: |
|---|---|
|
<style>
ul { list-style-type: none; margin: 0; padding: 0; } li { display: inline; } </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> |
By default, <li> elements are block elements. Using "display: inline;" lets us remove the line breaks before and after each list item, to display them on one line.
