Community Learn Tools Library Leisure

English

Home > Web Front-end > CSS Tutorial > Build a horizontal navigation bar using inline list items in CSS

Build a horizontal navigation bar using inline list items in CSS

PHPz

Release： 2023-08-29 14:29:11

forward

620 people have browsed it

使用 CSS 中的内联列表项构建水平导航栏

Build a horizontal navigation bar using inline list items. Set

elements inline.

Example

You can try running 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;
         }
         .active {
            background-color: #4CAF50;
            color: white;
         }
         li {
            border-bottom: 1px solid #555;
            display: inline;
         }
      </style>
   </head>
   <body>
      <ul>
         <li><a href = "#home">Home</a></li>
         <li><a href = "#company" class="active">Company</a></li>
         <li><a href = "#product">Product</a></li>
         <li><a href = "#services">Services</a></li>
         <li><a href = "#contact">Contact</a></li>
      </ul>
   </body>
</html>

Copy after login

The above is the detailed content of Build a horizontal navigation bar using inline list items in CSS. For more information, please follow other related articles on the PHP Chinese website!

source：tutorialspoint.com

Previous article：What is progressive rendering? Next article：Can you make a website using only HTML and no CSS?

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn