CSS是网页设计中最重要的一部分，它为页面的布局、字体、颜色等方面提供了丰富的样式选择。其中一个重要的应用场景是将多个元素排成一排。

/* 将多个元素水平排列 */
.container {
display: flex;
justify-content: space-between;
align-items: center;
}

上面的CSS代码中，我们使用了flex布局模型，通过设置父元素的display属性为flex，以及justify-content和align-items属性为space-between和center，实现了子元素的水平排列。

如果我们想要将多个按钮竖直排列，可以使用如下代码：

/* 将多个元素竖直排列 */
.container {
display: flex;
flex-direction: column;
align-items: center;
}

上面的代码中，我们添加了flex-direction属性，将排列方向设置为竖直方向。然后设置align-items属性为center，使得子元素在垂直方向上居中对齐。

除此之外，我们还可以使用float属性来实现元素的排列。如下代码将两个元素横向排列：

/* 使用float属性实现元素排列 */
div {
float: left;
}

需要注意的是，使用float属性进行排列时，需要在父元素添加clearfix或overflow:hidden属性，以避免出现布局错乱的问题。

在实际的开发中，根据排列的需求和实际情况选择合适的排列方式和CSS样式，可以帮我们快速的实现网页的布局和样式设计。