如何阻止这些按钮重叠？

Question

过去3天我只知道HTML和CSS的基础知识，所以我确信这是一个非常基本的问题（可能需要一个简单的答案）。

我尝试建立一个关于数学的网站作为修订练习（www.mathematicool.net）。在全宽浏览器上，主页上的按钮看起来没问题。但是，随着浏览器变窄，按钮分布在多行上，它们似乎在垂直方向上重叠。在此页面的CSS中，我尝试将padding-top和padding-bottom添加到.button类，但这只会拉伸按钮，而不是将它们展开。我也尝试过使用margin-top和margin-bottom，但这些似乎都没有做任何事情。

我需要做什么？

Answer 1

保证金不适用于内联元素，例如<a>。尝试在链接上设置display: inline-block，然后您可以设置保证金，比如margin: 5px。

Answer 2

此外，您可以使用媒体查询添加特定于页面所在浏览器窗口当前大小的CSS。https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

我查看了您的网站www.mathematicool.net。这应该很好用：

@media (max-width: 700px) {
  .button {
    display: block;
    margin: 5px;
  }
}

看起来像：

Answer 3

您可以尝试clear: both;或者如果您是浮动它们，可以尝试float: none;