如何操作 - 等寬導航欄連結
瞭解如何建立具有等寬導航連結的導航欄。
等寬選單
建立響應式導航欄
步驟 1) 新增 HTML
示例
<!-- 導航選單 -->
<div class="navbar">
<a class="active" href="#">主頁</a>
<a href="#">搜尋</a>
<a href="#">聯絡</a>
<a href="#">登入</a>
</div>
步驟 2) 新增 CSS
示例
/* 樣式導航選單 */
.navbar {
width: 100%;
background-color: #555;
overflow: auto;
}
/* 導航連結 */
.navbar a {
float: left;
padding: 12px;
color: white;
text-decoration: none;
font-size: 17px;
width: 25%; /* 四個等寬連結。如果您有兩個連結，請使用 50%，三個連結使用 33.33%，依此類推.. */
text-align: center; /* 如果您希望文字居中 */
}
/* 滑鼠懸停時新增背景顏色 */
.navbar a:hover {
background-color: #000;
}
/* 樣式化當前/活動的連結 */
.navbar a.active {
background-color: #04AA6D;
}
/* 新增響應式 - 在小於 500px 的螢幕上，使導航連結堆疊顯示，而不是並排顯示 */
@media screen and (max-width: 500px) {
.navbar a {
float: none;
display: block;
width: 100%;
text-align: left; /* 如果您希望在小螢幕上文字左對齊 */
}
}
自己動手試一試 »
帶圖示的等寬導航連結
提示：訪問我們的 CSS 導航欄教程 瞭解更多關於導航欄的資訊。
