如何为三个float布局的按钮添加15px间距且保持所有按钮在同一行

解决方案 #

你可以改用Flex布局实现需求，相比原有的float方案适配性更强，也能完美满足你的两个要求：按钮间隔15px、始终保持在同一行。

修改步骤 #

1. 给包裹三个按钮的外层div新增自定义类名btn-group
2. 新增对应CSS样式，同时删除原有按钮样式里的float: left属性，补充基础内边距优化按钮显示效果

最终代码 #

CSS部分

/* 修正原有代码漏写的.button选择器 */
.button {
  background-color: #4CAF50;
  border: none;
  color: black;
  text-align: center;
  text-decoration: none;
  font-size: 14px;
  padding: 6px 12px;
}

.button2 {
  background-color: orange;
  border: none;
  color: black;
  text-align: center;
  text-decoration: none;
  font-size: 14px;
  padding: 6px 12px;
}

.button3 {
  background-color: orangered;
  border: none;
  color: white;
  text-align: center;
  text-decoration: none;
  font-size: 14px;
  padding: 6px 12px;
}

/* 新增按钮容器样式 */
.btn-group {
  display: flex;
  /* 控制按钮间距为15px */
  gap: 15px;
  /* 强制不换行，保证按钮始终在同一行 */
  flex-wrap: nowrap;
  /* 可选：容器宽度不足时横向滚动，避免撑破外层布局 */
  overflow-x: auto;
}

HTML部分

<div class="grid-container">
  <div class="grid-item">
    <h4><strong>Wecandoo</strong></h4>
    <p style="text-align: left;">
      <a href="https://la-box-cadeau.com/wecandoo/">
        <img class="size-medium wp-image-28876 alignleft" src="https://la-box-cadeau.com/wp-content/uploads/2021/10/wecandoo-03-130x130-1.jpg" alt="box cadeau wecandoo" width="100" height="100" />
      </a>
      Un site qui répertorie les meilleurs artisans qui proposent des ateliers découverte autour de chez vous
    </p>

    <!-- 给按钮外层div加上btn-group类 -->
    <div class="btn-group">
      <a class="button" href="https://wecandoo.fr/#ae432">Site de la box </a>
      <a class="button2" href="https://www.w3docs.com/">Box bières</a>
      <a class="button3" href="https://la-box-cadeau.com/wecandoo/">En savoir plus </a>
    </div>
    <strong>Box a partir de : 19,99</strong>
  </div>
</div>

说明 #

flex布局的gap属性会自动在元素之间生成指定间距，不会在第一个元素左侧和最后一个元素右侧额外增加间距，比手动设置margin更便捷。flex-wrap: nowrap属性会强制所有flex子项不换行，始终保持在同一行。

内容的提问来源于stack exchange，提问作者g rom