Question

我知道这个问题对很多人来说都是容易的，但对我来说不是，特别是我不是前端开发人员，我有一个大学项目完全依赖于后端并且有一个简单的项目前端代码。
我在2个绿色框下面有2个按钮，这些按钮应该在绿色框的中间，在我的PC的小屏幕上，一切正常，它们就这样位于我的屏幕中间。 enter image description here

但是如果我在大学时使用的计算机将与教授讨论时使用，则形状将完全不同。
enter image description here
看到按钮是如何移动的，因为代码网站没有响应？
这是我的按钮的CSS代码

.spots .spot button{
  background-color: white; 
  color: black; 
  border: 2px solid grey;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  cursor:pointer;
  display:block;
  float:left;
  border-radius:10px;
  position:absolute;
}
.spots .spot button:hover{
  background-color: #4CAF50;
  color: white;
}
.spots .spot #park1button{
  top:1700px;
  left:130px;
}
.spots .spot #park2button{
  top:1700px;
  left:370px;
}

html代码：

<div class="normal spot">
    <h2>For Daily Customers</h2>
    <div id="park1"class="colorofback">
      <p id="park1p">spot number 1 is available</p>
    </div>
    <div id="park2" class="colorofback">
      <p id="park2p">spot number 2 is available</p>
    </div>
    <button id="park1button">click to book</button>
    <button id="park2button">click to book</button>
</div>

最后是2个按钮的容器的CSS代码

.spots{
  overflow:hidden;
  width:100%;
}
.spots h1{
  color:Teal;
  text-align:center;
}
.spots .spot{
  width:48%;
  float:left;
  padding:7px;
}
.spots .normal{
  border-right:1px solid black;
}
.spots .spot h2{
  color:#696969;
  text-align:center;
}
.spots .spot .colorofback{
  width:200px;
  height:300px;
  background-color:green;
  border-radius: 5%;
  color:white;
  text-align: center;
  font-size:40px;
  margin-left:25px;
  margin-right:10px;
  float:left;
  padding:2px;
}
.spots .spot .colorofback p{
  text-align: center;
  padding:8px;
}

那么即使我更改屏幕尺寸，怎么也不能始终在2个绿色框下方的中间显示按钮？

Answer 1

尝试flex属性，除非您的项目将在某些旧的浏览器上运行，否则使用它非常舒适。我的情况是您使用了position：absolute css属性，它将根据顶部和左侧的值来绝对定位DOM元素。我想这就是原因。删除位置绝对属性。除非必要，否则不要使用它。此属性的需要完全不同，仅当您要放置与另一个Dom相邻的内容（例如：下拉列表）时才应使用此属性，并且可以改善html的结构。基于预览，我建议您将可用的div和相应的按钮放在一个div中。对两者都执行此操作，并为父div添加align：center属性。这将使所有内容垂直居中对齐，并且在屏幕尺寸更改时也不会中断。

我网站上的响应元素

1 个答案: