我有一个登录表单,当在较小的屏幕上查看时,文本框将压缩到非常窄的高度。当我为父级login-form
和login-container
容器设置高度时,父级的高度会增加,但文本框不会增加,它们会保持狭窄。问:在小屏幕上观看时,如何增加高度?HTML:
<!-- Login form -->
<div class="login-form animate" >
<form action= "" method="post">
<div class="login-container ">
<h2>Welcome!</h2>
<input type="text" placeholder="Username.." name="uname" id="uname" required>
<input type="password" placeholder="Password.." name="passw" id="passw" required>
<input type="hidden" name="token" id="token" value= <?php echo $_SESSION["loggedin"] ?> >
<button class="logbut" type="submit" name="login" id="login">Login</button>
</div>
</form>
<form action= "index.php" method="post">
<div class="login-container ">
<label>
<input class="pswreset" type="submit" name="forgot" id="forgot" value="Forgot password?">
</label>
</div>
</form>
</div>
CSS:
.login-container {
padding: 16px;
}
.login-form {
left: 1%;
right: 1%;
position: absolute;
width:25%;
text-align: center;
margin-right:auto;
margin-left:auto;
display: grid;
grid-template-columns: auto;
align-content: center;
background-color: #FFFFFF;
border-radius: 4px;
}
/*Small media devices specific styles*/
@media screen and (max-width: 800px) {
/*-------------Login page------------*/
.login-form, .login-topnav {
width: 100%;
max-width:100%;
margin: 0px;
padding: 0px;
}
.login-container {
margin: 0px;
width: 100%;
max-width:100%;
padding: 0px;
}
}
所以我解决了我的问题。您只需将各个文本框设置为所需的高度单位,在我的情况下为6vh Relative to 1% of the height of the viewport*
,即:
/*Small media devices specific styles*/
@media screen and (max-width: 800px) {
/*-------------Login page------------*/
input[type=text], input[type=password], input[type=email] {
width: 99%;
padding: 0px;
height: 6vh;
}