我问这个问题是关于如何制作围绕我表单上所有元素的边框。我已经几个月没有编码了,如果你能帮助我,我将不胜感激,干杯
.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>
最佳答案
.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>
关于html - 我怎样才能制作一个环绕我所有表单元素的实心边框?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58820972/