div内按钮横向均匀排布

有多种方式可以实现div内按钮横向均匀排布，以下是其中几种常用的方法：

1. 使用flex布局

将父元素的display属性设置为flex，然后使用justify-content和align-items属性来控制子元素的水平和垂直对齐方式。同时，将子元素的flex属性设置为1，使它们平均分配父元素的宽度。

HTML代码：

<div class="btn-container">
  <button>按钮一</button>
  <button>按钮二</button>
  <button>按钮三</button>
</div>

CSS代码：

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

.btn-container button {
  flex: 1;
}

2. 使用inline-block元素

将子元素的display属性设置为inline-block，然后使用text-align属性来控制它们的水平对齐方式。同时，将子元素的width属性设置为百分比，使它们平均分配父元素的宽度。

HTML代码：

<div class="btn-container">
  <button>按钮一</button>
  <button>按钮二</button>
  <button>按钮三</button>
</div>

CSS代码：

.btn-container {
  text-align: justify;
  font-size: 0;
}

.btn-container::after {
  content: "";
  display: inline-block;
  width: 100%;
}

.btn-container button {
  display: inline-block;
  width: 30%; /* 根据实际情况调整宽度 */
  font-size: 16px; /* 根据实际情况调整字体大小 */
}

3. 使用grid布局

使用CSS的grid布局可以更加灵活地实现子元素的排布方式。将父元素的display属性设置为grid，然后使用grid-template-columns属性来定义子元素的列数和宽度。

HTML代码：

<div class="btn-container">
  <button>按钮一</button>
  <button>按钮二</button>
  <button>按钮三</button>
</div>

CSS代码：

.btn-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 三列，每列平均分配剩余空间 */
}

.btn-container button {
  width: 100%;
}

以上三种方法都可以实现div内按钮横向均匀排布，具体使用哪种方法取决于实际情况和个人偏好。