CSS 可以幫助我們實現很多有趣的頁面布局效果，比如將一列元素變成一行。這種效果常常用于制作導航欄或菜單欄，讓網頁看起來更加美觀和易于使用。

.nav {
display: flex;
flex-direction: row;
}

實現這種效果的代碼非常簡單，我們只需要在父元素上添加display: flex;樣式即可。默認情況下，display: flex;會讓子元素沿著橫向排列，因此我們還需要添加一個flex-direction: row;樣式，以確保子元素在同一行上。

當然，如果你需要實現豎向排列的效果，只需要將flex-direction的值改為column即可。

.nav {
display: flex;
flex-direction: column;
}

除了使用 flex 布局，我們還可以使用 float 屬性來實現一列元素變成一行。不過需要注意的是，使用 float 布局需要使用 clearfix 或其他清除浮動的方法，以避免出現意外的布局問題。

.nav {
overflow: auto;
}
.nav li {
float: left;
}

上面的代碼中，我們在父元素上添加了overflow: auto;樣式，避免父元素的高度折疊。同時，我們將子元素（這里是列表項）添加了float: left;樣式，讓它們在同一行上排列。

總的來說，使用 CSS 實現一列變成一行并不難，只需要熟悉一些基本的布局方法即可。對于實現不同的布局效果，我們可以根據具體的需求選擇不同的布局方案，以確保頁面達到最佳的效果。