css并列两个按钮

在网站设计中，CSS有着非常重要的作用。CSS不仅可以让网站页面变得美观，还可以让元素之间产生适当的关联。下面，我们将介绍如何使用CSS让两个按钮并列。

code>
    button class="button1">
    按钮1/button>
    button class="button2">
    按钮2/button>
    /code>
    

首先，我们需要将两个按钮创建出来。代码中使用了button标签，并使用class属性分别为两个按钮命名。接下来，我们需要使用CSS将它们并列在一起，代码如下：

code>
.button1, .button2 {
      display: inline-block;
      margin: 10px;
      padding: 5px 10px;
      background-color: #008CBA;
      color: #fff;
      border: none;
      border-radius: 5px;
}
    /code>
    

代码中我们使用了class选择器针对两个按钮进行样式设置。其中，display属性设置为inline-block可以让两个按钮横向排列；margin属性设置为10px可以让两个按钮之间产生一定的间距；padding属性设置为5px 10px可以让按钮产生一定的内边距；background-color属性设置了按钮的背景颜色；color属性设置了按钮的文字颜色；border属性设置为none可以去掉按钮的边框；border-radius属性设置为5px可以让按钮的边缘变得圆滑。

通过以上设置，我们已经可以让两个按钮并列在一起了。如果你想让它们居中对齐，可以在它们的父元素上设置text-align属性为center。

code>
    div style="text-align:center">
      button class="button1">
    按钮1/button>
      button class="button2">
    按钮2/button>
    /div>
    /code>
    

至此，我们已经实现了将两个按钮并列的效果。你可以根据自己的实际需求进行样式设置，让页面呈现出最佳的排版效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！