避免按钮在重新缩放时碰撞

我想要做的是避免这两个按钮在浏览器页面重新缩放到较小尺寸时互相碰撞。避免按钮在重新缩放时碰撞

我试图使用保证金，但由于两个按钮都处于绝对位置，它根本不起作用。

下面是这个

#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

避免按钮在重新缩放时碰撞

回答

相关问题