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

Question

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

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

我需要做什么？

Answer 1

边距在 <a> 等内联元素上效果不佳。尝试在链接上设置display: inline-block，然后你可以设置边距，比如margin: 5px。

Answer 2

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

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

How can I stop these buttons overlapping?

html

css

css-position