[分享]css两个button并列

CSS两个button并列是实现网页排版的常用技巧之一，可以让不同的按钮在同一行内展示。

.button {
  display: inline-block;
  padding: 10px;
  background-color: #44c767;
  color: #FFF;
  text-align: center;
  font-size: 18px;
  border-radius: 5px;
  cursor: pointer;
}

.left-button {
  margin-right: 10px;
}

.right-button {
  margin-left: 10px;
} 

在这段代码中，我们定义了两个类名为.button的样式，用来设置按钮的基本样式，包括背景颜色、字体颜色、边框圆角等。我们使用display: inline-block让按钮可以并列显示，而不是默认一行一个。同时，在其中一个按钮上加上.left-button类名，在另一个按钮上加上.right-button类名，通过设置margin-left和margin-right来控制两个按钮之间的距离。

通过以上CSS代码的设置，我们便可以在HTML中实现两个button的并列。

<div class="button-container">
  <button class="button left-button">按钮1</button>
  <button class="button right-button">按钮2</button>
</div> 

在HTML中，我们定义了一个class名为button-container的容器，用来将两个button包裹。然后，分别定义了两个button，分别加上类名left-button和right-button，让其样式不同。这样，就可以在网页中实现两个button的并列展示。