Question

我正在我的网站上工作，这是我的新网站。我的网站上有很多按钮，但是当屏幕分辨率最小化时，位置会发生变化。我还提供了CSS代码。请帮我该怎么做，以使我的按钮以不同的屏幕分辨率自动定位。

/* Set a style for the submit/send button */
.form-container .btn{
  background-color: #009900;
  color: white;
  border: none;
  cursor: pointer;
  opacity: 0.8;
}
.form-container .send{
 margin-top: 38.5%;
 margin-right:-17.5%;
 padding: 5px 52px;
}
/* Add a red background color to the cancel button */
.form-container .cancel {
  background-color: red;
  padding: 5px 10px;
  margin-top: -10px;
  margin-bottom: 6.5px;
  width: 48%;
}

Click here to see the snapshot!

Answer 1

将position:relative用于父级div。之后，请为孩子使用position:absolute和top，bottom，left，right值。 position:relative根据自身定位。

尝试

/* Set a style for the submit/send button */

.form-container {
  position:relative;
}

.form-container .btn{
  background-color: #009900;
  color: white;
  border: none;
  cursor: pointer;
  opacity: 0.8;
}
.form-container .send{
   position:absolute;
   top: 38.5%;
   right:-17.5%;
   padding: 5px 52px;
}
/* Add a red background color to the cancel button */
.form-container .cancel {
  background-color: red;
  padding: 5px 10px;
  position:absolute;
  top: -10px;
  bottom: 6.5px;
  width: 48%;
}

Answer 2

很少可以解决的问题。

首先，应将position:absolute的子元素使用.formContainer。这有助于根据父级计算子级（在您的情况下为按钮）的位置。

第二，使用-ve margin会产生更多无法解决的问题。最好使用top，left等来放置元素。

.cancel{
position:absolute,
right: -10px,
width: 5%
}

这将确保btn不会超出表单容器，并且始终向容器的右边界渲染10个像素。

如何以不同的屏幕分辨率自动在网站上放置按钮？

2 个答案: