如何創建：等寬導航欄鏈接

學習如何創建具有等寬導航鏈接的導航欄。

創建響應式導航欄

第一步 - 添加 HTML：

<!-- 導航菜單 -->
<div class="navbar">
  <a class="active" href="#">Home</a>
  <a href="#">Search</a>
  <a href="#">Contact</a>
  <a href="#">Login</a>
</div>

第二步 - 添加 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; /* 如果你想讓文本居中If you want the text to be centered */
}
/* 添加鼠標懸停時的背景顏色 */
.navbar a:hover {
  background-color: #000;
}
/* 設置當前/活動鏈接的樣式 */
.navbar a.active {
  background-color: #04AA6D;
}
/* 添加響應能力 - 在小于 500 像素的屏幕上，使導航鏈接堆疊顯示，而不是并排顯示 */
@media screen and (max-width: 500px) {
  .navbar a {
    float: none;
    display: block;
    width: 100%;
    text-align: left; /* 如果您希望文本在小屏幕上左對齊 */
  }
}

親自試一試

相關頁面

教程：CSS 導航欄