我正在为我的实习创建一个网页,我需要一个登录名和密码表单。我像这样为文本框设置动画:
input[type=text] {
z-index: 10;
width: 30px;
position: absolute;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
height: 30px;
display: block;
}
input[type=text]:focus {
width: 130px;
}
<input type="text" name="username" placeholder="User.." size="30" />
然后我将表格插入到一个 div 中并对密码执行相同的操作
#login {
position: absolute;
font-family: "Times New Roman", Times, serif;
font-weight: bold;
text-align: left;
right:350px;
bottom:5px;
height: 200px;
width:200px;
}
input[type=text] {
z-index: 10;
width: 30px;
position: absolute;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
height: 30px;
display: block;
}
input[type=text]:focus {
width: 130px;
}
input[type=password] {
z-index: 10;
width: 30px;
position: absolute;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
display: block;
height: 30px;
}
input[type=password]:focus {
width: 130px;
}
<div id="login">
<form name="frmLogin" method="post" action="">
<br><br>
<table width="100" align="center">
<tr>
<td>Username:</td>
<td><input type="text" name="username" placeholder="User.." size="30" /></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" name="password" placeholder="Pass.." size="30" /></td>
</tr>
</table>
<input type="hidden" name="acao" value="login" />
</form>
现在您可以在代码片段中看到我的问题,登录和密码表单相互重叠,我希望它们之间有一点空间。
最佳答案
#login {
/*position: absolute;*/
font-family: "Times New Roman", Times, serif;
font-weight: bold;
text-align: left;
right:350px;
bottom:5px;
height: 200px;
width:200px;
}
input[type=text] {
z-index: 10;
width: 30px;
/*position: absolute;*/
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
height: 30px;
display: block;
}
input[type=text]:focus {
width: 130px;
}
input[type=password] {
z-index: 10;
width: 30px;
/*position: absolute;*/
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
display: block;
height: 30px;
}
input[type=password]:focus {
width: 130px;
}
<div id="login">
<form name="frmLogin" method="post" action="">
<br><br>
<table width="100" align="center">
<tr>
<td>Username:</td>
<td><input type="text" name="username" placeholder="User.." size="30" /></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" name="password" placeholder="Pass.." size="30" /></td>
</tr>
</table>
<input type="hidden" name="acao" value="login" />
</form>
这里的问题是position:absolute
。根据您的使用情况,您也可以使其与绝对位置一起使用,但您必须声明高度。现在,我刚刚删除了该职位。希望这会有所帮助。
关于html - 如何在用户名和密码表单之间留空,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42411861/