CSS 水平導航欄
水平導航欄
有兩種方法可以建立水平導航欄。使用 行內 或 浮動 列表項。
行內列表項
構建水平導航欄的一種方法是指定 <li> 元素為行內元素，除了前一頁的“標準”程式碼。
示例說明
display: inline;- 預設情況下，<li> 元素是塊級元素。在這裡，我們消除了每個列表項之前和之後的換行符，將它們顯示在同一行上。
浮動列表項
建立水平導航欄的另一種方法是浮動 <li> 元素，併為導航連結指定佈局。
示例說明
float: left;- 使用 float 使塊級元素並排浮動。display: block;- 允許我們指定內邊距（以及高度、寬度、外邊距等，如果您想要的話）。padding: 8px;- 在每個 <a> 元素之間指定一些內邊距，使其看起來更美觀。background-color: #dddddd;- 為每個 <a> 元素新增灰色背景色。
提示：如果您想要一個全寬背景色，請將 background-color 新增到 <ul> 而不是每個 <a> 元素。
水平導航欄示例
建立一個帶有深色背景色的基本水平導航欄，並在使用者將滑鼠懸停在連結上時更改連結的背景色。
示例
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”類，讓使用者知道他們正在哪個頁面。
右對齊連結
透過將列表項向右浮動（float:right;）來右對齊連結。
示例
<ul>
<li><a href="#home">首頁</a></li>
<li><a href="#news">新聞</a></li>
<li><a href="#contact">聯絡</a></li>
<li style="float:right"><a class="active" href="#about">關於</a></li>
</ul>
自己動手試一試 »
邊框分隔符
新增 <li> 的 border-right 屬性來建立連結分隔符。
示例
/* 為所有列表項新增灰色右邊框，最後一個列表項除外 (last-child) */
li {
border-right: 1px solid #bbb;
}
li:last-child {
border-right: none;
}
自己動手試一試 »
固定導航欄
使導航欄在使用者滾動頁面時也能固定在頁面頂部或底部。
注意：固定定位在移動裝置上可能無法正常工作。
灰色水平導航欄
一個帶有細灰色邊框的灰色水平導航欄示例。
固定導航欄
向 <ul> 新增 position: sticky; 來建立固定導航欄。
固定元素根據滾動位置在相對和固定之間切換。它定位為相對，直到達到視口中的給定偏移位置 - 然後它“固定”到位（類似 position:fixed）。
注意：Internet Explorer 不支援粘性定位。Safari 需要 -webkit- 字首（請參閱上面的示例）。您還必須指定 top、right、bottom 或 left 中的至少一個才能使粘性定位生效。
