Article Topic Learning Download Q&A Programming Dictionary Game Recent Updates

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

Home > Web Front-end > CSS Tutorial > body text

Build a horizontal navigation bar using inline list items in CSS

PHPz

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

forward

584 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