[分享]css两个按钮并排有间距

在网页设计中，经常需要将两个按钮并排放置并留有间距，这可以通过CSS来实现。以下是一种简单的方法：

.button {
  display: inline-block;
  padding: 10px 20px;
  border: none;
  background-color: #007bff;
  color: white;
  text-align: center;
  font-size: 16px;
  margin-right: 20px; /*设置右侧间距*/
}

button:last-child {
  margin-right: 0;/*最后一个按钮去掉间距*/
} 

上述代码中，我们定义了一个名为“button”的类，作为按钮的样式。我们使用“display：inline-block”来让按钮出现在同一行上，并设置左右内边距为10像素，上下内边距为20像素。通过“border：none”来去掉按钮边框，通过“background-color”来设置背景颜色。 “color”用于设置文本颜色，而“text-align：center”可将按钮上的文本设置为居中对齐。最后，通过“margin-right”来设置按钮之间的右边距。

如果不想在最后一个按钮之后留有空隙，可以使用“:last-child”伪类来为最后一个按钮删除右边距。下面是一个示例HTML代码：

<button class="button">Button 1</button>
<button class="button">Button 2</button> 

使用上述CSS代码，两个按钮会并排展示，两者之间会有20像素的间距。如有更多按钮需要排列，则可以在HTML代码中添加更多同样具有“button”类的按钮即可。