Computer >> Máy Tính >  >> Lập trình >> CSS

Xây dựng thanh điều hướng ngang với các mục danh sách nội tuyến trong CSS

Sử dụng Mục Danh sách Nội tuyến để tạo thanh điều hướng ngang. Đặt các phần tử

  • dưới dạng nội dòng.

    Ví dụ

    Bạn có thể thử chạy mã sau để tạo thanh điều hướng ngang:

    <!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>