在網頁開發中，導航欄是我們經常需要設計和實現的一個部分。而其中一個常見的設計元素就是導航欄字是豎著排列的。那么，在CSS中如何實現這種效果呢？ 首先，我們可以通過CSS中的writing-mode屬性來設置文字排列方式。默認情況下，writing-mode是horizontal-tb，即水平從左到右排列。而我們需要的豎直排列，可以設置為vertical-rl，即從上到下，從右到左排列。代碼如下：

.nav {
writing-mode: vertical-rl;
text-orientation: upright;
}
.nav a {
display: block;
}

接下來，我們還需要對文字的方向進行調整，使其保持豎直排列時不會倒置。這里我們可以使用text-orientation屬性，將其設置為upright，使文字排列方向保持正常。同時，我們還需要將導航元素的a標簽設置為塊級元素，以便它們能夠完全填充整個導航選項。 除此之外，我們還可以通過line-height屬性和text-align屬性來調整導航選項的間距和對齊方式。例如，假設我們想要讓每個導航選項之間的間距為20像素，并將它們向右對齊，則可以使用如下代碼：

.nav a {
line-height: 20px;
text-align: right;
}

在實現導航欄字豎直排列的過程中，需要注意的是，由于文字方向的改變，我們可能需要對一些其他樣式進行微調。例如，文字大小、背景圖像等都可能需要進行相應的調整。 總的來說，通過writing-mode和text-orientation屬性的調整，我們可以輕松實現導航欄豎直排列的效果。當然，具體實現過程還需要結合實際情況進行相應的調整和優化。