我可以阻止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>
如果运行此操作,您可以通过查看"普通"文本框看到"宽"文本框伸出容器."普通"文本框浮动到容器的实际边缘.我正在尝试使"宽"文本框填充其容器,而不像"普通"文本框那样扩展到边缘之外.
bob*_*nce 274
有没有办法让文本框填充其容器的宽度而不扩展到它之外？
是的:通过使用CSS3属性'box-sizing:border-box',您可以重新定义'width'意味着包含外部填充和边框.
不幸的是因为它是CSS3,支持不是很成熟,并且由于规范过程还没有完成,它同时在浏览器中有不同的临时名称.所以:
input.wide {
width: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
老式的替代方案就是在封闭的<div>或<td>元素上放置一些'padding-right',等于你认为浏览器会在'px'中多少额外的左右填充/边框给出输入.(对于IE <8,通常为6px.)
- 我认为移动设备将在计算机之前提供完整的HTML5支持. (20认同)
- @Kindred:如果你在其中包含IEMobile和Blackberry,那绝对不是. (4认同)
- +1实际上保存了我头发的剩余部分! (4认同)
- 我怎么花这么长时间才找到这个很棒的奶油酱??? 请问我们能接受这个答案吗？ (2认同)
Hil*_*amp 87
你可以做的是删除以下内容的默认"额外" input:
input.wide {display:block; width:100%;padding:0;border-width:0}
这将保持input其容器内部.现在,如果你想要做的边界,包裹input在一个div与所设定的边界div(这样你可以删除display:block从input太).就像是:
<div style="border:1px solid gray;">
<input type="text" class="wide" />
</div>
编辑:
另一种选择是,而不是从中删除样式input,在包装中补偿它div:
input.wide {width:100%;}
<div style="padding-right:4px;padding-left:1px;margin-right:2px">
<input type="text" class="wide" />
</div>
这会在不同的浏览器中给你一些不同的结果,但它们不会与容器重叠.div中的值取决于边框的大小以及边框input之间所需的空间大小input.
- 这是一个非常有创意的解决方案 我唯一的问题是,除非我使用JavaScript来更改包装div的边框,否则我无法在文本框中定义轮廓. (3认同)
Jac*_*dge 13
这解决了我的问题!
无需外部div.只需将其应用于您指定的文本框即可.
box-sizing: border-box;
使用此属性"宽度和高度属性(和最小/最大属性)包括内容,填充和边框,但不包括边距"
请参阅w3schools的财产说明.
希望这有助于某人!
Tob*_*hen 10
刚刚遇到这个问题,我能找到的唯一解决方案在我的所有测试浏览器(IE6,IE7,Firefox)中都有以下几点:
- 将输入字段包装在两个单独的DIV中
- 将外部DIV设置为宽度100%,这可以防止我们的容器溢出文档
- 将填充放在精确量的内部DIV中以补偿输入的水平溢出.
- 在输入上设置自定义填充,使其溢出的内容与内部DIV中允许的量相同
代码:
<div style="width: 100%">
<div style="padding-right: 6px;">
<input type="text" style="width: 100%; padding: 2px; margin: 0;
border : solid 1px #999" />
</div>
</div>
这里,输入元素的总水平溢出是6px - 2x(填充+边框) - 所以我们为内部DIV设置了一个填充右边6px.
实际上,box-sizing支持非常好:http://caniuse.com/#search=box-sizing
因此,除非您针对IE7,否则您应该能够使用此属性解决此类问题.像sass或更少的层使得更容易处理像这样的前缀规则,顺便说一句.