Question

我正在为我的实习创建一个网页，我需要一个登录名和密码表。我给这些文本框设置了动画：

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>

所以现在你可以在代码片段中看到我的问题，登录名和密码表单相互重叠，我希望它们之间有一点空间。

Answer 1

从输入css

中删除绝对位置

＆＃13;

#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;
    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;
    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;
}

＆＃13;

<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>

＆＃13;

Answer 2

#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。根据您的使用情况，您也可以使用绝对位置，但您必须声明高度。现在，我刚刚删除了这个职位。希望这会有所帮助。

Answer 3

您可以删除位置：absolute，position：absolute使您的元素退出页面上的正常位置。在这种情况下，它删除了它们之间的间距，并将输入框放置在低于表格标记的位置。

如果您需要，可以通过更改密码字段的边距来解决此问题，例如评论中提到的Keerthana Prabhakaran。

如何在用户名和密码表单之间分隔

3 个答案: