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

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

我试着制作一个关于数学的网站作为复习练习（www.mathematicool.net）。在全宽浏览器上，主页上的按钮看起来不错。但是，随着浏览器变窄，按钮分散在多行上，它们似乎在垂直方向上重叠。在这个页面的CSS中，我尝试将

padding top

和

padding bottom

添加到

.button

类中，但这只是拉伸按钮，而不是将它们展开。我也尝试过使用

页边距顶部

和

页边距底部

，但这两种方法似乎都没有效果

---

我需要做什么？

Margin在

之类的内联元素上无法正常工作。尝试在链接上设置

display:inline block

，然后您可以设置边距，例如

margin:5px

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

我查看了你的网站

www.mathematicsool.net

。这应该很有效：

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

让它看起来像：

---

您可以尝试

清除：两者都可以或者如果您正在浮动它们，您可以尝试
浮动：无
因此，当调整浏览器大小时，您希望按钮如何反应？您想让它们彼此垂直对齐吗？使用浏览器收缩以保持在一行上（因为它们是全宽的）？或者其他一些功能？我确实更喜欢它的外观，但是删除我的CSS for.button并将其粘贴到它的位置并不起作用。我做错了什么？不要删除你以前的CSS。按钮，你可以添加
display:block；边距：5px
到现有CSS。它不起作用的原因是媒体的查询。上面的媒体查询是这样的，如果你的窗口宽度小于700px，那么应用这个CSS。我理解。谢谢