如何阻止这些按钮重叠？

我只知道过去3天HTML和CSS的基本知识，所以我确信这是一个非常基本的问题（这可能需要一个简单的答案）。如何阻止这些按钮重叠？

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

什么我需要做什么？

来源

2015-12-01 M Smith

因此，当浏览器大小，你想如何反应按钮？你想让他们垂直对齐吗？缩小浏览器以保持一行（因为它们是全宽）？或者其他一些功能？ – wmeade

此外，还可以使用媒体查询具体的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; 
    } 
}

使它看起来像：

来源

2015-12-01 00:41:17 Jayem

我更喜欢那样的外观，但删除了我为.button所用的CSS，并粘贴它在它的位置不起作用。我究竟做错了什么？ –

不要删除你的.button的旧CSS，你可以添加'display：block;保证金：5px'到你现有的CSS。它不工作的原因是因为媒体查询。上面的媒体查询是这样的，如果你的窗口宽度小于700px，那么应用这个CSS。 – Jayem

我明白了。谢谢！ –

在内联元素（例如<a>）上，边界不能很好地工作。尝试在链接上设置display: inline-block，然后您可以设置保证金，例如margin: 5px。

来源

2015-12-01 00:39:15 mrdommyg

您可以尝试clear: both;或者，如果你在漂流他们，你可以尝试float: none;

来源

2015-12-01 00:43:30

如何阻止这些按钮重叠？

回答

相关问题