css 两个按钮 并排

在网页开发中，如何让两个按钮横排显示是一个经常遇到的问题。这里我们介绍一种使用CSS实现的方法。

.button-group {
      display: flex;
 /* 告诉浏览器使用flex布局 */}
.button {
      flex: 1;
     /* 设置按钮的宽度比例为1 */  margin-right: 10px;
 /* 设置按钮之间的间距 */}
    

以上是一个简单的CSS代码，我们使用了flex布局，将按钮组容器的显示方式设置为弹性布局。接着，设置每一个按钮的宽度比例都为1，这样可以实现平分容器的宽度。最后，在每一个按钮的右侧设置一个固定的间距。

div class="button-group">
      button class="button">
    按钮1/button>
      button class="button">
    按钮2/button>
    /div>
    

最后，我们在HTML代码中使用这个组合框架标记来分别包装两个按钮。此时两个按钮就可以愉快地并排显示了。

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