如何实现多个按钮水平并排排列并设置按钮间间距

你当前代码中的按钮默认上下堆叠，是因为按钮设置了display: grid属于块级元素，默认会独占整行空间。要实现两个按钮水平并排、中间保留间距的效果，最简便易维护的方案是使用弹性盒布局，不需要改动你已经写好的按钮内部布局样式。

具体实现方法 #

• 给两个按钮外层添加一个公共父容器
• 给父容器设置display: flex，该属性默认会让直接子元素沿水平方向排列
• 给父容器设置gap属性，直接定义两个按钮之间的间距，不需要单独给按钮加外边距，不会出现首尾多余边距、边距重叠的问题
• （可选）给父容器加align-items: center，可以保证两个按钮在垂直方向居中对齐

完整修改后代码 #

CSS 部分 #

/* 原有按钮内部样式无需修改 */
.act_button span {
  color: black;
  width: 10vh;
}

.act_button {
  width: 200px;
  height: 100px;
  background-color: #ADD8E6;
  border: none;
  display: grid;
  grid-template-columns: auto auto;
  place-content: space-between;
}

.act_button>span {
  padding: 2px;
  margin-left: -2vh;
  margin-right: -1vh;
}

/* 新增按钮组容器样式 */
.button-wrap {
  display: flex;
  gap: 20px; /* 可自行调整数值改变按钮间距 */
  align-items: center;
}

HTML 部分 #

<!-- 用父容器包裹两个并排按钮 -->
<div class="button-wrap">
  <button class="act_button" type="button">
    <span>Top left</span>
    <span>Top right</span>
    <span>Bottom left</span>
    <span>Bottom right</span>
  </button>

  <button class="act_button" type="button">
    <span>Top left</span>
    <span>Top right</span>
    <span>Bottom left</span>
    <span>Bottom right</span>
  </button>
</div>

无额外父容器的替代写法 #

如果不想新增父标签，也可以直接修改按钮的display属性，配合外边距实现效果，只是灵活性稍差：

.act_button {
  /* 将原有的display: grid 改为 inline-grid，让按钮可以同行排列 */
  display: inline-grid;
  margin-right: 20px; /* 定义按钮右侧间距 */
  /* 其余原有按钮样式保持不变 */
}
/* 清除最后一个按钮的多余右边距，避免容器右侧出现空白 */
.act_button:last-child {
  margin-right: 0;
}

内容的提问来源于stack exchange，提问作者manu p