Build Horizontal Navigation Bar with Floating List Items in CSS



To create a horizontal navigation bar, use the floating list item.

Example

You can try to run the following code to create a horizontal navigation bar

Live Demo

<!DOCTYPE html> <html>    <head>       <style>          ul {             list-style-type: none;             margin: 0;             padding: 0;          }          li {             float: left;          }          li a {             display: block;             padding: 8px;             background-color: orange;          }       </style>    </head>    <body>       <ul>          <li><a href = "#home">Home</a></li>          <li><a href = "#news">News</a></li>          <li><a href = "#contact">Contact</a></li>          <li><a href = "#about">About</a></li>       </ul>    </body> </html>
Updated on: 2020-07-01T11:05:06+05:30

974 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements