Erstellen Sie eine horizontale Navigationsleiste mithilfe von Inline-Listenelementen in CSS

PHPz

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

nach vorne

590 Leute haben es durchsucht

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

Erstellen Sie eine horizontale Navigationsleiste mit Inline-Listenelementen. Setzen Sie das

-Element inline.

Beispiel

Sie können versuchen, den folgenden Code auszuführen, um eine horizontale Navigationsleiste zu erstellen:

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>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonErstellen Sie eine horizontale Navigationsleiste mithilfe von Inline-Listenelementen in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle：tutorialspoint.com

Vorheriger Artikel：Was ist progressives Rendering? Nächster Artikel：Kann man eine Website nur mit HTML und ohne CSS erstellen?

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Neueste Artikel des Autors