如何阻止這些按鈕重疊？

我只知道過去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

如何阻止這些按鈕重疊？

回答

相關問題