相关疑难解决方法(0)
我可以阻止100%宽度文本框扩展到容器之外吗？
让我说我有一个文本框,我想填补整行.我会给它一个这样的风格:
input.wide {display:block; width: 100%}
这会导致问题,因为宽度基于文本框的内容.文本框默认具有边距,边框和填充,这使得100%宽度的文本框大于其容器.
例如,在右边:
有没有办法让文本框填充其容器的宽度而不扩展到它之外？
这是一些示例HTML来显示我的意思:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<style type="text/css">
#outer{border: 1px solid #000; width: 320px; margin: 0px;padding:0px}
#inner{margin: 20px; padding: 20px; background: #999;border: 1px solid #000;}
input.wide {display:block; margin: 0px}
input.normal {display:block; float: right}
</style>
</head>
<body>
<div id="outer">
<div id="inner">
<input type="text" class="wide" />
<input type="text" class="normal" />
<div style="clear:both;"></div>
</div>
</div>
</body>
</html>
如果运行此操作,您可以通过查看"普通"文本框看到"宽"文本框伸出容器."普通"文本框浮动到容器的实际边缘.我正在尝试使"宽"文本框填充其容器,而不像"普通"文本框那样扩展到边缘之外.
177
推荐指数
推荐指数
5
解决办法
解决办法
11万
查看次数
查看次数
宽度:100%的CSS输入超出了父级的范围
我试图创建一个由两个带有插入填充的输入字段组成的登录表单,但这两个字段总是超出其父节点的边界; 问题源于添加的插入填充.可以采取哪些措施来纠正这个问题？
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: …149
推荐指数
推荐指数
5
解决办法
解决办法
14万
查看次数
查看次数
如何为HTML文本输入和下拉输入设置相同的宽度
我有两个HTML元素,如下所示:
<input type="text">
和
<select>
<option>Apple</option>
<option>Orange</option>
<option>Banana</option>
<option>Grapes</option>
</select>
我完全无法使它们具有相同的宽度.无论我指定的宽度是100%还是200px等等,下拉总是比文本框短约5px.这种情况发生在IE,Firefox和Chrome中 - 在WINDOWS中.
如何将它们设置为具有相同的宽度？
解
input, select
{
-ms-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
-webkit-box-sizing:border-box;
}
10
推荐指数
推荐指数
1
解决办法
解决办法
1万
查看次数
查看次数