宽度为100%的CSS输入超出了父元素的范围
宽度为100%的CSS输入超出了父元素的范围
提问于 2013-06-04 07:35:29
我正在尝试创建一个由两个具有内嵌填充的输入字段组成的登录表单，但这两个字段最终总是超出其父字段的边界；问题源于添加的内嵌填充。为了纠正这个问题，可以做些什么？
JSFiddle代码片段：http://jsfiddle.net/4x2KP/
注意:代码可能不是最干净的。例如，封装文本输入的span元素可能根本不需要。
#mainContainer {
line-height: 20px;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
background-color: rgba(0,50,94,0.2);
margin: 20px auto;
display: table;
-moz-border-radius: 15px;
border-style: solid;
border-color: rgb(40, 40, 40);
border-radius: 2px 5px 2px 5px / 5px 2px 5px 2px;
border-radius: 2px;
border-radius: 2px 5px / 5px;
box-shadow: 0 5px 10px 5px rgba(0,0,0,0.2);
}
.loginForm {
width: 320px;
height: 250px;
padding: 10px 15px 25px 15px;
overflow: hidden;
}
.login-fields > .login-bottom input#login-button_normal {
float: right;
padding: 2px 25px;
cursor: pointer;
margin-left: 10px;
}
.login-fields > .login-bottom input#login-remember {
float: left;
margin-right: 3px;
}
.spacer {
padding-bottom: 10px;
}
/* ELEMENT OF INTEREST HERE! */
input[type=text],
input[type=password] {
width: 100%;
height: 20px;
padding: 5px 10px;
background-color: rgb(215, 215, 215);
line-height: 20px;
font-size: 12px;
color: rgb(136, 136, 136);
border-radius: 2px 2px 2px 2px;
border: 1px solid rgb(114, 114, 114);
box-shadow: 0 1px 0 rgba(24, 24, 24,0.1);
}
input[type=text]:hover,
input[type=password]:hover,
label:hover ~ input[type=text],
label:hover ~ input[type=password] {
background:rgb(242, 242, 242) !important;
}
input[type=submit]:hover {
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.3),
inset 0 -10px 10px rgba(255,255,255,0.1);
} <div id="mainContainer">
<div id="login" class="loginForm">
<div class="login-top">
</div>
<form class="login-fields" onsubmit="alert('test'); return false;">
<div id="login-email" class="login-field">
<label for="email" style="-moz-user-select: none;-webkit-user-select: none;" onselectstart="return false;">E-mail address</label>
<span><input name="email" id="email" type="text"></input></span>
</div>
<div class="spacer"></div>
<div id="login-password" class="login-field">
<label for="password" style="-moz-user-select: none;-webkit-user-select: none;" onselectstart="return false;">Password</label>
<span><input name="password" id="password" type="password"></input></span>
</div>
<div class="login-bottom">
<input type="checkbox" name="remember" id="login-remember"></input>
<label for="login-remember" style="-moz-user-select: none;-webkit-user-select: none;" onselectstart="return false;">Remember my email</label>
<input type="submit" name="login-button" id="login-button_normal" style="cursor: pointer" value="Log in"></input>
</div>
</form>
</div>
</div>
回答 8
Stack Overflow用户
发布于 2015-12-09 04:19:51
如果以上所有操作都失败，请尝试为您的输入设置以下属性，使其占用最大空间但不会溢出：
input {
min-width: 100%;
max-width: 100%;
}Stack Overflow用户
发布于 2015-04-10 23:07:27
其他答案似乎告诉您硬编码宽度或使用特定于浏览器的技巧。我认为有一种更简单的方法。
通过计算宽度并减去填充(这会导致字段重叠)。20px来自10px的左填充和10px的右填充。
input[type=text],
input[type=password] {
...
width: calc(100% - 20px);
}Stack Overflow用户
发布于 2013-06-04 07:44:16
填充将添加到整体宽度中。因为你的容器有一个像素宽度，你最好也给输入一个像素宽度，但是记住从你设置的宽度中去掉填充和边框，以避免同样的问题。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/16907518
复制相关文章
相似问题
腾讯云开发者
