输入类型的宽度为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交叉。像这样：

Codepen上的演示。

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

Answer 1

问题出在输入填充。要解决此问题，请在输入字段中添加box-sizing属性：

box-sizing: border-box;

我刚刚在您的Codepen中对其进行了测试，似乎是您想要的结果。