PHP前端开发

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

百变鹏仔 4周前 (09-20) #CSS
文章标签 内联

使用内联列表项构建水平导航栏。将

  • 元素设置为内联。

    示例

    您可以尝试运行以下代码来创建水平导航栏:

    Live演示

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