首页 文章

输入类型的宽度为100％并且在父div中

提问于
浏览 次
0

我有一个表单，其中包含电子邮件和密码以及其他一些按钮的输入 .

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％宽度 . And 的填充为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 . 像这样：

enter image description here

demo at Codepen .

How do I keep the input box inside the parent div and have a width of 100% and still have padding ？

html css

3 回答

  • 3

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

    box-sizing: border-box;

    我只是在你的codepen中测试它，看起来像你想要的结果 .

    回复于
  • 1

    给div宽度100％然后改变输入字段宽度

    回复于
  • 0

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

    回复于

相关问题