输入类型的宽度为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;
}

然后问题从输入宽度开始。所有按钮都在父元素内，但输入框跨越父div。像这样：

demo at Codepen

如何将输入框保留在父div中并且宽度为100％且仍有填充？

Answer 1

问题在于输入填充。要修复它，请在输入字段中添加box-sizing属性：

box-sizing: border-box;

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

Answer 2

将div宽度设为100％，然后更改输入字段宽度

Answer 3

这是因为输入元素中的填充。它设置为十，导致它必须扩展超过父元素的边缘。可能的解决方案包括仅移除衬垫或减小宽度以使其适合内部。

Answer 4

将此代码添加到您的样式文件中

*,
 ::before {
    box-sizing: border-box;
}