html - 避免按钮在重新缩放时发生碰撞

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

你不应该在元素上使用内联样式，所以我删除了那些。我还重写了您的示例以使用 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 */
}