html - 我怎样才能制作一个环绕我所有表单元素的实心边框？

Question

我问这个问题是关于如何制作围绕我表单上所有元素的边框。我已经几个月没有编码了，如果你能帮助我，我将不胜感激，干杯

.form {
	top: 20%;
	position: absolute;
	margin-left: 70%;
	border: 8px solid black;
}

.form .username {
	height: 20px;
	width: 180px;
	top: 30px;
	position: absolute;
	padding: 6px;
	margin: 10px;
	margin-left: 53%;
		border-radius: 5px;
}

.form .password {
	height: 20px;
	width: 180px;
	top: 90px;
	margin-left: 38%;
	position: absolute;
	padding: 6px;
	border-radius: 5px;

}

.form #submit {
	height: 20px;
	width: 70px;
	top: 120px;
	height: 30px;
	position: absolute;
	padding: 6px;
	margin: 30px;
}

<div class="form">
  <form action="" method="POST">
  
    <input type="text" placeholder=" Please enter a username" class="username"name="username">
    
    <input type="password" placeholder="please enter your password" class="password" name="password">
    
    <input type="submit" id="submit" name="submit">
    
  </form>
</div>

Answer 1

.form 中的所有元素都有绝对位置，导致它没有任何高度，这不是必需的，因为父级将控制位置。

.center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
}

.form {
  border: 8px solid black;
}

.form input {
  border-radius: 5px;
  padding: 6px;
  margin: 10px;
}

.form .username, .form .password {
  height: 20px;
  width: 180px;
}

.form #submit {
  height: 30px;
  display: block;
}

<div class="form center">
  <form action="" method="POST">
    <input type="text" placeholder=" Please enter a username" class="username" name="username">

    <input type="password" placeholder="please enter your password" class="password" name="password">

    <input type="submit" id="submit" name="submit">
  </form>
</div>