我可以阻止100%宽度文本框扩展到容器之外吗？

input.wide {display:block; width: 100%}

input.wide {
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

或元素上放置一些'padding-right',等于你认为浏览器会在'px'中多少额外的左右填充/边框给出输入.(对于IE <8,通常为6px.)

---

我认为移动设备将在计算机之前提供完整的HTML5支持.

---

@Kindred:如果你在其中包含IEMobile和Blackberry,那绝对不是.

---

+1实际上保存了我头发的剩余部分!

---

我怎么花这么长时间才找到这个很棒的奶油酱??? 请问我们能接受这个答案吗？

2> Hilbrand Bou..：

---

你可以做的是删除以下内容的默认"额外" input:

input.wide {display:block; width:100%;padding:0;border-width:0}

这将保持input其容器内部.现在,如果你想要做的边界,包裹input在一个div与所设定的边界div(这样你可以删除display:block从input太).就像是:

编辑: 另一种选择是,而不是从中删除样式input,在包装中补偿它div:

input.wide {width:100%;}


  

这会在不同的浏览器中给你一些不同的结果,但它们不会与容器重叠.div中的值取决于边框的大小以及边框input之间所需的空间大小input.

---

这是一个非常有创意的解决方案 我唯一的问题是,除非我使用JavaScript来更改包装div的边框,否则我无法在文本框中定义轮廓.

3> Jack Trowbri..：

---

这解决了我的问题!

无需外部div.只需将其应用于您指定的文本框即可.

box-sizing: border-box; 

使用此属性"宽度和高度属性(和最小/最大属性)包括内容,填充和边框,但不包括边距"

请参阅w3schools的财产说明.

希望这有助于某人!

4> Tobias Cohen..：

---

刚刚遇到这个问题,我能找到的唯一解决方案在我的所有测试浏览器(IE6,IE7,Firefox)中都有以下几点:

将输入字段包装在两个单独的DIV中

将外部DIV设置为宽度100%,这可以防止我们的容器溢出文档

将填充放在精确量的内部DIV中以补偿输入的水平溢出.

在输入上设置自定义填充,使其溢出的内容与内部DIV中允许的量相同

代码:

这里,输入元素的总水平溢出是6px - 2x(填充+边框) - 所以我们为内部DIV设置了一个填充右边6px.

5> chikamichi..：

---

实际上,box-sizing支持非常好:http://caniuse.com/#search=box-sizing

因此,除非您针对IE7,否则您应该能够使用此属性解决此类问题.像sass或更少的层使得更容易处理像这样的前缀规则,顺便说一句.