代码之家 › 专栏 › 技术社区 › drippy-cat

如何在HTML中分隔多个按钮?

github-pages button html

drippy-cat · 技术社区 · 2 年前

<a href="https://github.com/drippy-cat" class="button primary">GitHub</a>
<a href="https://discord.gg/xvTyBgn6F2" class="button primary">Discord</a>
<a href="https://app.daily.dev/drippy-cat" class="button primary">daily.dev</a>

我一直在我的网站上工作。此代码位于的index.html中 this repository 。我一直在尝试在页面的“社交”选项卡下创建。然而,它最终看起来像我附上的屏幕截图。有没有一种方法可以将按钮隔开更多的空间,并将其设置为网格模式?谢谢

1 回复 | 直到 2 年前

Vic 2 年前

一个快速的解决方案是添加一个包装并指定按钮的边距。

<div class="button-container">
  <a href="https://github.com/drippy-cat" class="button primary">GitHub</a>
  <a href="https://discord.gg/xvTyBgn6F2" class="button primary">Discord</a>
  <a href="https://app.daily.dev/drippy-cat" class="button primary">daily.dev</a>
</div>
<style>
  .button-container {
    display: flex;
  }

  .button-container a.button {
    margin-right: 15px;
  }
</style>

推荐文章