Heim > Web-Frontend > CSS-Tutorial > Erstellen Sie eine horizontale Navigationsleiste mithilfe von Inline-Listenelementen in CSS

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

PHPz
Freigeben: 2023-08-29 14:29:11
nach vorne
620 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
    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
    Beliebte Tutorials
    Mehr>
    Neueste Downloads
    Mehr>
    Web-Effekte
    Quellcode der Website
    Website-Materialien
    Frontend-Vorlage