CSS導(dǎo)航橫向豎向切換是常見的設(shè)計(jì)需求，本文將介紹兩種方法實(shí)現(xiàn)此功能。

.nav {
display: flex; /* 橫向?qū)Ш椒绞?*/
flex-direction: row; /* 橫向排列 */
}
.nav.vertical {
flex-direction: column; /* 豎向排列 */
}

上述代碼是第一種方法，即通過改變flex布局的flex-direction屬性來實(shí)現(xiàn)橫向和豎向切換。在HTML中，只需添加一個(gè)vertical類名即可切換樣式。

.nav {
float: left; /* 橫向?qū)Ш椒绞?*/
}
.nav.vertical {
float: none; /* 取消浮動(dòng) */
}

第二種方法是通過float屬性來實(shí)現(xiàn)。在HTML中同樣只需添加一個(gè)vertical類名即可切換樣式。

以上是兩種常見的CSS導(dǎo)航橫向豎向切換方法，根據(jù)實(shí)際需求選擇相應(yīng)的方法即可。