css布局两个button在同父标签中左右两侧分布的方法

要实现在同一父标签中左右两侧分布两个button的布局，有多种方法可供选择。

下面是两个常用的方法：

方法一：使用float布局

使用float布局可实现左右两侧分布的效果。代码如下：

<div class="btns-container">
  <button class="left-btn">Left Button</button>
  <button class="right-btn">Right Button</button>
</div>

.btns-container {
  overflow: auto;  /*清除浮动产生的高度塌陷*/
}
.left-btn {
  float: left;  
}
.right-btn {
  float: right;
}

解析说明：

1. 父盒子设置overflow: auto; 清除浮动产生的高度塌陷。
2. 左侧按钮使用float: left; 右侧按钮使用float: right; 可以让两个按钮分别浮动到左右两侧。

演示例子：https://codepen.io/abbie/pen/JjGmWgY

方法二：使用flex布局

使用flex布局也可实现左右两侧分布的效果。代码如下：

<div class="btns-container">
  <button class="left-btn">Left Button</button>
  <button class="right-btn">Right Button</button>
</div>

.btns-container {
  display: flex;
  justify-content: space-between;
}

解析说明：

1. 父盒子设置display: flex; 使用flex布局。
2. 使用justify-content: space-between; 属性可将两个按钮分别放置到左右两侧。

演示例子：https://codepen.io/abbie/pen/wvGapgW

综上所述，以上两种方法都可以实现同一父标签中左右两侧分布两个button的布局，可根据实际情况选择使用。