入力タイプが幅100％で親のdiv内にある

Question

メールとパスワードの入力フォームと他のボタンがあります。

HTML：

<div id="login-form"> 
<form> 
    <input type="email" placeholder="Email" id="email" name="email_phone"> 
    <br> 
    <input type="password" placeholder="Password" id="password" name="password"> 
    <br> 
    <button id="login-submit">Submit</button> 
    <br> 
    <button id="login-forgot">Forgot Password</button> 
</form> 
<br> 
<br> 
<center> 
    <p>Don't have an account?</p> 
</center> 
<button id="create-new-account">Create Account Now</button> 
</div> 

私は親の100％の幅であることを入力してボタンを必要としています。 のパディングは10ピクセルです。

#login-form input[type=email], #login-form input[type=password] { 
    width: 100%; 
    font-size: 14pt; 
    border: none; 
    outline: none; 
    padding: 10px; 
} 

#login-form button { 
    width: 100%; 
    border: none; 
    color: white; 
    font-size: 14pt; 
    padding: 10px; 
    margin-top: 10px; 
    border-radius: 4px; 
    cursor: pointer; 
} 

次に、問題は入力幅から始まります。すべてのボタンは親要素内にありますが、入力ボックスは親divを横断します。このように：

demo at Codepen。

入力ボックスを親div内に保持する方法と、幅を100％にして埋め込みを行う方法を教えてください。？

Answer 1

問題は入力パッドにあります。それはあなたの入力フィールドにボックスのサイズ変更プロパティを追加修正するには：

box-sizing: border-box; 

私はちょうどあなたのcodepenでそれをテストし、あなたが望む結果のように思えます。

Answer 2

これは入力要素の埋め込みによるものです。これは10に設定されているため、親要素の端を超えて展開する必要があります。考えられる解決策には、パッディングを削除するか、幅を狭めて内側にうまく収まるようにすることだけです。

Answer 3

divの幅を100％にしてから入力フィールドの幅を変更します。