Question

以下是我正在制作的基本网站的代码。我正在为学校项目做这件事。

＆＃13;

.html-button {
  font-family: 'Hammersmith One', sans-serif;
  font-size: 20px;
  color: white;
  position: absolute;
  top: 55%;
  left: 45%;
  text-align: center;
  -webkit-transform: translate3d(-50%, -50%, 0);
  -o-transform: translate3d(-50%, -50%, 0);
  -webkit-border-radius: 8;
  border-radius: 8px;
  font-size: 21px;
  background: #42A5F6;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
  -webkit-transition-duration: 0.7s;
  /* Safari */
  transition-duration: 0.7s;
  border: none;
  cursor: pointer;
}
.html-button:hover {
  background: #0090FF;
  text-decoration: none;
  color: black;
}
.css-button {
  font-family: 'Hammersmith One', sans-serif;
  font-size: 20px;
  color: white;
  position: absolute;
  top: 55%;
  left: 55.3%;
  text-align: center;
  -webkit-transform: translate3d(-50%, -50%, 0);
  -o-transform: translate3d(-50%, -50%, 0);
  -webkit-border-radius: 8;
  border-radius: 8px;
  font-size: 21px;
  background: #42A5F6;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
  -webkit-transition-duration: 0.7s;
  /* Safari */
  transition-duration: 0.7s;
  border: none;
  cursor: pointer;
}
.css-button:hover {
  background: #0090FF;
  text-decoration: none;
  color: black;
}

＆＃13;

<button class="html-button" role="button">VIEW HTML</button>
<button class="css-button" role="button">VIEW CSS</button>

＆＃13;

这不是我的全部代码，但这是我在这里关注的主要部分。这将显示2个单独的按钮（用CSS装饰），在我的屏幕上，它们是完美的长度，但是目前，当我使浏览器变小时，按钮越来越小，因为它变小了，我怎么能阻止它？ / p>

Answer 1

这种情况正在发生，因为您已经完全定位了按钮。使用更少的代码可以更清晰地完成此操作。我建议将它们放在一个div中，然后将它放在你想要的位置，如下所示：

HTML：

<div class="buttons">
  <button class="button" role="button">VIEW HTML</button>
  <button class="button" role="button">VIEW CSS</button>
</div>

CSS：

.buttons {
  text-align: center;
  position: relative;
  top: 300px;
}
.button {
  font-family: 'Hammersmith One', sans-serif;
  font-size: 20px;
  color: white;
  text-align: center;
  border-radius: 8px;
  font-size: 21px;
  background: #42A5F6;
  padding: 10px 20px 10px 20px;
  border: none;
}
.button:hover {
  background: #0090FF;
  color: black;
}

Answer 2

我个人的建议是不要在按钮上使用绝对位置，而是绝对定位容器，然后相对于按钮定位按钮。

绝对定位（来自W3Schools）：

如果绝对定位元素没有定位祖先，它会使用文档正文，并随页面滚动一起移动。

这基本上表示它会根据浏览器窗口的宽度计算您的left和top百分比，当您的浏览器窗口大小发生变化时，它会相应地重新计算并将按钮拉近一起。

相反，如果您想在屏幕中央并排放置2个按钮，请尝试以下方法： https://jsfiddle.net/5btchz9j/

另外，为了这么早地学习这些东西的荣誉，我当然不是在9点建立网站：）

如何使HTML按钮响应

2 个答案: