CSS 水平導航欄

水平導航欄

有兩種創建水平導航欄的方法：使用行內或浮動列表項。

行內列表項

構建水平導航欄的一種方法是，除了上一章中的“標準”代碼外，還要將 <li> 元素指定為 inline：

實例

li {
  display: inline;
}

親自試一試

例子解釋：

display: inline; -默認情況下，<li> 元素是塊元素。在這里，我們刪除每個列表項之前和之后的換行符，這樣它們才能顯示在一行。

浮動列表項

創建水平導航欄的另一種方法是浮動 <li> 元素，并為導航鏈接規定布局：

實例

li {
  float: left;
}
a {
  display: block;
  padding: 8px;
  background-color: #dddddd;
}

親自試一試

例子解釋：

  • float: left; - 使用 float 使塊元素滑動為彼此相鄰
  • display: block; - 將鏈接顯示為塊元素可以使整個鏈接區域都可單擊（不僅是文本），而且允許我們指定填充（如果需要，還可以指定高度，寬度，邊距等）
  • padding: 8px; - 使塊元素更美觀
  • background-color: #dddddd; - 為每個元素添加灰色背景色

提示：如需全寬的背景色，請將 background-color 添加到 <ul> 而不是每個 <a> 元素：

實例

ul {
  background-color: #dddddd;
}

親自試一試

水平導航欄實例

創建具有深色背景色的基礎水平導航欄，并在用戶將鼠標移到鏈接上方時改變鏈接的背景色：

實例

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}
li {
  float: left;
}
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/* 當鼠標懸停時把鏈接顏色更改為 #111（黑色） */
li a:hover {
  background-color: #111;
}

親自試一試

活動/當前導航鏈接

向當前鏈接添加 "active" 類，這樣用戶就知道他/她在哪個頁面上：

實例

.active {
  background-color: #4CAF50;
}

親自試一試

右對齊鏈接

通過將列表項向右浮動來右對齊鏈接（float:right;）：

實例

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li style="float:right"><a class="active" href="#about">About</a></li>
</ul>

親自試一試

邊框分隔欄

將 border-right 屬性添加到 <li>，以創建鏈接分隔符：

實例

/* 為所有列表項添加灰色右邊框，最后一項（last-child）除外 */
li {
  border-right: 1px solid #bbb;
}
li:last-child {
  border-right: none;
}

親自試一試

固定的導航欄

使導航欄保持在頁面的頂部或底部，即使用戶滾動頁面也是如此：

固定在頂部

ul {
  position: fixed;
  top: 0;
  width: 100%;
}

親自試一試

固定在底部

ul {
  position: fixed;
  bottom: 0;
  width: 100%;
}

親自試一試

注意：固定定位在移動設備上可能無法正常工作。

灰色水平導航欄

帶有細灰色邊框的灰色水平導航欄的實例

實例

ul {
  border: 1px solid #e7e7e7;
  background-color: #f3f3f3;
}
li a {
  color: #666;
}

親自試一試

粘性導航欄

為 <ul> 添加 position: sticky;，以創建粘性導航欄。

粘性元素會根據滾動位置在相對和固定之間切換。它是相對定位的，直到在視口中遇到給定的偏移位置為止 - 然后將其“粘貼”在適當的位置（比如 position:fixed）。

實例

ul {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

親自試一試

注意：Internet Explorer、Edge 15 和更早版本不支持粘性定位。 Safari 需要 -webkit- 前綴（請參見上面的例子）。您還必須指定 top、right、bottom 或 left 至少之一，以使粘性定位起作用。

更多實例

響應式的上導航欄
如何使用 CSS 媒體查詢來創建響應式頂部導航。
響應式的側導航欄
如何使用 CSS 媒體查詢來創建響應式側導航。
下拉式導航欄
如何在導航欄中添加下拉菜單。