css 一列变一行 |好看的css3 按钮样式

.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 实现一列变成一行并不难，只需要熟悉一些基本的布局方法即可。对于实现不同的布局效果，大家可以根据具体的需求选择不同的布局方案，以确保页面达到最佳的效果。