[分享]css两个按钮竖着显示

今天我们来讲解一下如何用CSS使得两个按钮竖着排列。 实现这个效果非常简单，只需使用一些CSS属性即可。.button { display: inlineblock; //将按钮设置为行内块元素 ma...

今天我们来讲解一下如何用CSS使得两个按钮竖着排列。 实现这个效果非常简单，只需使用一些CSS属性即可。

.button {
    display: inline-block; //将按钮设置为行内块元素
    margin: 10px; //设置按钮之间的间距
    padding: 10px; //设置按钮内部的填充
    background-color: #f2f2f2; //设置背景颜色
    border: none; //取消边框
    border-radius: 5px; //设置圆角边框
    font-size: 16px; //设置字体大小
}

.button:first-child {
    margin-top: 0; //取消第一个按钮的上边距
}

.button:last-child {
    margin-bottom: 0; //取消最后一个按钮的下边距
} 

以上代码设置了按钮的样式，使用了display属性将按钮设置为行内块元素，然后使用了margin属性来设置按钮之间的间距。接着使用了padding属性来给按钮内部添加了一些填充，再设置了border属性来取消了按钮的边框。为了让按钮看起来更加漂亮，我们使用了border-radius属性将按钮的边框设置为圆角。最后，我们使用了font-size属性来设置按钮内部文字的大小。

如果你想让两个按钮竖着排列，只需要在CSS中设置一个按钮的上边距为0，另一个按钮的下边距为0，就可以轻松实现目标。

.button:first-child {
    margin-top: 0; //取消第一个按钮的上边距
}

.button:last-child {
    margin-bottom: 0; //取消最后一个按钮的下边距
} 

现在你已经知道了如何使用CSS来实现两个按钮竖着排列了，赶快动手试试吧。