ユーザー名とパスワードの間にスペースを入れる方法

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

そして私は

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

をDIVにテーブルを挿入し、パスワードに同じことをしました

これでスニペットで私の問題を見ることができます、ログインフォームとパスワードフォームはオーバーレイです私はお互いに夢中になり、私はそれらの間に少しのスペースを持っていたい。

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>

両方からの絶対位置を削除します。あなたの使い方によっては、絶対位置でも動作させることができますが、高さを宣言する必要があります。今のところ、私はその地位を取り除いたばかりです。お役に立てれば。

Answer 2

は、ここでの問題は、position:absolute、入力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

位置を削除することができます：絶対、位置：絶対は、要素がページ上の通常の位置から外れることができます。この場合、それらの間のスペースを取り除き、入力ボックスをテーブルテーブルよりも低く配置しました。

これを修正するには、コメントに記載されているKeerthana Prabhakaranのようなパスワードフィールドの余白を変更します。