[分享]css两个按钮同行

在网页设计中，按钮是非常重要的元素，它们可以实现页面的交互效果。在一些场景中，我们需要让两个按钮横向排列，本文就来介绍如何让两个按钮同行。首先要使用CSS中的display属性对按钮进行布局。butt...

在网页设计中，按钮是非常重要的元素，它们可以实现页面的交互效果。在一些场景中，我们需要让两个按钮横向排列，本文就来介绍如何让两个按钮同行。首先要使用CSS中的display属性对按钮进行布局。

button{
  display: inline-block;
} 

以上代码可以将按钮设置为行内块元素，这样两个按钮就可以在同一行显示。如果想要控制两个按钮不紧挨着，可以使用margin属性进行调整。比如以下代码：

button{
  display: inline-block;
  margin-right: 10px;
} 

以上代码可以在两个按钮之间添加10像素的空隙。当然，如果想让左右两个按钮的位置不同，还可以使用float属性来进行浮动。比如这样：

button:nth-child(1){
  float: left;
  margin-right: 10px;
}
button:nth-child(2){
  float: right;
  margin-left: 10px;
} 

以上代码可以让左边的按钮浮动到左边，右边的按钮浮动到右边，中间留10像素的空隙。通过合理使用display、margin、float等属性，让两个按钮同行是非常容易实现的。