如何在用户名和密码表格之间留出空格

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>

所以现在您可以在 sn-p 中看到我的问题，登录和密码表单相互重叠，我希望它们之间有一点空间。

Answer 1

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

从两个输入 css 中删除绝对位置

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

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

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

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