重新缩放时避免按钮碰撞

Question

我想做的是当网页浏览器的页面重新调整为较小的尺寸时，避免这两个按钮相互撞击。

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

这是

的HTML和CSS

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

#appButtons:hover{
	background-color:#E9E9E9;
	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>

Answer 1

您需要使用Bootstrap，如果您不熟悉Bootstrap，那么在CSS中，您可以使用Media Query，以使您的网页响应。

单击下面的链接，查看有关媒体查询的概念和示例。 https://www.w3schools.com/css/css3_mediaqueries.asp

Answer 2

您不应该在元素上使用内联样式，因此我删除了它们。我还重写了你的例子来使用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 */
}