避免按鈕在重新縮放時碰撞

我想要做的是避免這兩個按鈕在瀏覽器頁面重新縮放到較小尺寸時互相碰撞。避免按鈕在重新縮放時碰撞

我試圖使用保證金，但由於兩個按鈕都處於絕對位置，它根本不起作用。

下面是這個

#appButtons{ 
 
\t height:40px; 
 
\t width:125px; 
 
\t background-color:#000080; 
 
\t border:solid 1px #000080; 
 
\t color:white; 
 
\t border-radius:4px; 
 
\t text-align:center; 
 
\t margin-bottom:0px; 
 
} 
 

 
#appButtons:hover{ 
 
\t background-color:#E9E9E9; 
 
\t color:#000080; 
 
}

<table> 
 
    <tr style="display:none"> 
 
    <button id="appButtons" name="see_words" style="position:absolute;left:25%;top:10%;display: inline-block;">Check words in your dictionary</button><br> 
 
    </tr> 
 
    <tr> 
 
    <button id="appButtons" name="add_words" style="position:absolute;right:25%;top:10%;display:inline-block;">Add words to your dictionary</button><br> 
 
    </tr> 
 
</table>

來源

2017-03-05 leveeee

真的有必要的按鈕被絕對定位？ –

@RalphDavidAbernathy不一定，但我怎麼能夠將它們放在「任何位置」，而不移出父div？ – leveeee

您真的想如何定位按鈕？你想讓它們在水平和垂直方向都居中，並且每個按鈕周圍都有一些邊距？你可以定義「任何地方」？試圖幫助你解決這個問題。 –

你不應該在元素上使用內聯樣式，所以我刪除了這些元素。我還重寫了您的示例以使用flexbox。我希望這有幫助！

HTML：

<div class="container"> 
    <button id="appButtons" name="see_words">Check words in your dictionary</button> 
    <button id="appButtons" name="add_words">Add words to your dictionary</button> 
</div>

CSS：

.container { 
    display: flex; 
    justify-content: center; 
} 

.container button { 
    margin: 50px; 
    /* add whatever margin you want here */ 
}

來源

2017-03-05 15:40:07

好的，我明白我現在做錯了什麼，我該怎麼做。謝謝 – leveeee

您需要使用引導程序，如果你不熟悉自舉，然後在CSS的HTML和CSS，你可以使用Media查詢，以使您的網頁響應。

點擊下面的鏈接，檢查有關媒體查詢的概念和示例。 https://www.w3schools.com/css/css3_mediaqueries.asp

來源

2017-03-05 14:07:33

我很熟悉bootstrap，但我寧願使用別的東西。所以謝謝你的CSS鏈接！ – leveeee

避免按鈕在重新縮放時碰撞

回答

相關問題