CSS導航欄文字橫向
<br>
CSS是網頁設計不可或缺的一部分，其中之一就是導航欄的樣式設計。導航欄文字的排布是關鍵的一步，因為文字排布的美觀和合理性直接影響到用戶體驗。在設計導航欄時，我們常用的方法就是讓文字橫向排列。
<br>
我們可以使用CSS來完成導航欄文字的橫向排列。具體實現方法是使用display屬性將文字元素變為塊級元素，再使用float屬性來控制它們的左右布局。
<br>
代碼示例如下：
<br>
<pre>
.nav {
width: 100%;
background-color: #333;
overflow: hidden;
}
<br>
.nav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
<br>
.nav a:hover {
background-color: #ddd;
color: black;
}

在上面的代碼中，我們首先創建了一個.nav的class來定義導航欄的樣式，并設置了寬度和背景顏色。然后我們定義.nav a的樣式，將它們的display屬性設為block，這樣它們就可以橫向排列了。我們還設置了文字的顏色、對齊方式、內邊距和字體大小等樣式。
當鼠標懸停在導航欄的文字上時，我們會更改它們的顏色和背景色以提高用戶體驗。
通過上述代碼，我們可以實現一個簡單的橫向導航欄。需要注意的是，如果導航欄的文字太多，在小屏幕設備上會導致排版問題。因此，我們建議使用響應式設計來適應不同屏幕大小和設備。