如何在用戶名和密碼錶格之間分隔

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

#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

您可以刪除位置：absolute，position：absolute使您的元素脫離頁面上的正常位置。在這種情況下，它將刪除它們之間的間距，並將輸入框放在比表格標籤更低的位置。

如果你想這樣做，你可以通過改變你的密碼字段的邊界來解決這個問題，比如評論中提到的Keerthana Prabhakaran。