CSS實現橫排菜單欄的方法非常簡單,只需使用display屬性來控制菜單項的展示方式即可。
nav { display: flex; // 開啟Flex布局 justify-content: space-between; // 將菜單項平均分布 align-items: center; // 垂直居中菜單項 } nav li { margin: 0 10px; // 添加菜單項之間的間隔 list-style: none; // 去除默認的序號 } nav a { text-decoration: none; // 去除下劃線 color: #333; // 設置文本顏色 } nav a:hover { color: #666; // 鼠標懸停時改變文本顏色 }
以上代碼實現了一個簡單的橫排菜單欄,只需在HTML中添加nav和li標簽以及對應的鏈接即可使用。