首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >输入类型的宽度为100%,并位于父div内。

输入类型的宽度为100%,并位于父div内。
EN

Stack Overflow用户
提问于 2016-04-30 05:54:19
回答 4查看 7.1K关注 0票数 3

我有一个表单输入一个电子邮件,密码和一些其他按钮。

html:

代码语言:javascript
运行
复制
<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。

代码语言:javascript
运行
复制
#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%,并且仍然有填充

EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/36951327

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档