时间戳

首页 > 解决方案 > 我想在 3 个按钮之间留一点空白

html - 我想在 3 个按钮之间留一点空白

问题描述

你好这是我的代码 html 和我的 css

background-color: #4CAF50; /* Green */
      border: none;
      color: black;
      text-align: center;
      text-decoration: none;
    
      font-size: 14px;
    
      float:left;
    
      }

    .button2 {
     background-color: orange; /* Green */
     border: none;
     color:black;
     text-align: center;
     text-decoration: none;
    
     font-size: 14px;
    
     float:left;

     }

    .button3 {
     background-color: orangered; /* Green */
     border: none;
     color: white;
     text-align: center;
     text-decoration: none;
 
    font-size: 14px;
    float:left;
}
<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><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>

我的问题是我希望每个按钮之间有一个 15 像素的小空间，并且都保持在同一行。我尝试了保证金，但这不像预期的那样有效

我还加入了一个屏幕截图，该网站现在如何感谢您阅读此内容，我希望有人可以帮助我[在此处输入图片描述][1]

[1]: https://i.stack.imgur.com/EZZ2Z.png

标签： htmlcss

解决方案

您真的希望整个锚元素都有一个边距，以便将框分开。你说你已经尝试过这个并且“它没有用”我不能说为什么但是这个片段给每个盒子一个边距并且它在浮动元素上工作正常。

边距分布在左右两侧，因此有一点对称性。如果不需要的话，你可以把它放在右边，然后从最后一个盒子上取下来。

请注意，float 实际上用于定位您想要围绕它的元素，例如，其他文本环绕它 - 通常用于在文本中定位 img。您可能想研究 inline-block 以将元素并排放置在不需要包装的地方（如果您的系统中是这种情况）。

.button {
  /* added for demo so the boxes have some height and fixed dimmensions */
  position: relative;
  height: 100px;
  width: 100px;
  margin: 0 7.5px 0 7.5px;
  border: none;
  color: black;
  text-align: center;
  text-decoration: none;
  font-size: 14px;
  float: left;
}

.button1 {
  background-color: #4CAF50;
  /* Green */
}

.button2 {
  background-color: orange;
}

.button3 {
  background-color: orangered;
}
<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>
      <a class="button button1" href="https://wecandoo.fr/#ae432">Site de la box
      </a>
      <a class="button button2" href="https://www.w3docs.com/">Box bières</a>
      <a class="button button3" href="https://la-box-cadeau.com/wecandoo/">En savoir plus </a>
    </div>
    <strong>Box a partir de : 19,99</strong>

另请注意，通过将按钮的所有常见样式放入一个类并在单独的 buttonn 类中添加差异（在本例中为背景颜色），已经对 CSS 进行了一些整理。

推荐阅读