[分享]css两个按钮并列

在网页设计中，按钮的设计是必不可少的。而如何将两个按钮并列显示是一个常见的问题。这里我们可以使用 CSS 来实现。下面是一段简单的实现代码：.btncontainer { display: flex...

在网页设计中，按钮的设计是必不可少的。而如何将两个按钮并列显示是一个常见的问题。这里我们可以使用 CSS 来实现。下面是一段简单的实现代码：

.btn-container {
  display: flex;
  justify-content: space-between;
  width: 200px;
}

.btn {
  padding: 10px 15px;
  background-color: pink;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
} 

上述代码中，我们通过一个容器（.btn-container）将两个按钮并列排列。这里使用了 Flexbox 布局，通过 justify-content: space-between; 属性让两个按钮靠两侧显示。同时，我们也可以设置容器的宽度属性 width: 200px; 以适应不同的页面布局。

对于按钮样式，我们使用了最基本的样式设置，如设置按钮间距（padding: 10px 15px;），背景颜色（background-color: pink;），文本颜色（color: #fff;），边框（border: none;）以及圆角（border-radius: 5px;）。此外，我们还设置了指针样式（cursor: pointer;），让鼠标移动到按钮上时出现光标。

最后，我们在 HTML 中，创建一个容器，并加上按钮的类，如下所示：

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

这样，两个并列的按钮就可以在页面上显示了。