Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> CSS

สร้าง Navigation Bar แนวนอนด้วย Inline List Items ใน CSS

ใช้ Inline List Items เพื่อสร้าง navigation bar แนวนอน โดยตั้งค่า <li> elements ให้เป็น display: inline

ตัวอย่าง

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