html - 我怎样才能阻止这些按钮重叠？

Question

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

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

我需要做什么？

Answer 1

此外，您可以使用媒体查询添加特定于页面所在浏览器窗口的当前大小的 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;
  }
}

让它看起来像: