html - 输入类型的宽度为 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%。 并且有 10px 的内边距。

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

那么问题就从输入宽度开始了。所有的按钮都在父元素里面，但是输入框跨越了父元素。像这样:

demo at Codepen .

如何将输入框保留在父 div 内，并且宽度为 100%，并且仍然有填充？

Answer 1

问题出在输入填充上。要修复它，请将 box-sizing 属性添加到您的输入字段:

box-sizing: border-box;

我刚刚在你的codepen中测试了它，看起来是你想要的结果。