我有一个表单输入一个电子邮件,密码和一些其他按钮。
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 of。
#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%,并且仍然有填充
https://stackoverflow.com/questions/36951327
复制相似问题