Question

我试图在文本框上设置宽度100％，但它延伸出容器..我已经检查了类似的一些问题，但似乎没有解释为什么问题发生..我知道手动设置属性，但我需要找出为什么会发生这种情况。我必须使用100％的财产价值来做..

   <body>
     <form id="form1" runat="server">
        <div style="border:1px solid gray;">
            <input type="text" style="width: 100%;"  id="title"/>

        </div>

    <div>
    <a href="#" id="postfile" style="float:left;">Post</a><span style="display:none;  border:1px solid #ee1100; margin-left:10px; color:#cc1100" id="errormessage"></span>
    </div>

</form>

Answer 1

添加box-sizing:border-box。它太宽的原因是因为您当前将内容设置为100％宽度，但添加了填充和边框。

Answer 2

尝试在输入中使用Box大小调整

<input type="text" style="width: 100%; box-sizing: border-box;"  id="title"/>

最常见的浏览器方式是：

<input type="text" style="width: 100%; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;"  id="title"/>

http://jsfiddle.net/zQXXh/

Answer 3

<input>中IE的默认边框样式使其超出容器div。逻辑输入为100％宽，但默认边框会为其添加额外宽度。您可以尝试在任何浏览器中向border:10px solid green;添加<input>。

<input type="text" style="width: 100%; border:10px solid green;"  id="title"/>

它会让你输入到容器div之外。因此，当您将border:0应用于<input>时，请执行以下操作：

<input type="text" style="width: 100%; border:0;"  id="title"/>

它适合容器。我希望这有帮助。

Answer 4

是的......正如Kolink所建议的那样，文本框的边距，边框和填充不为零。因此它的宽度为100％。因此，通过使用box-sizing：border-box，在元素上指定的任何填充或边框都布局并在此指定的宽度和高度内绘制

文本框宽度问题 - IE

4 个答案: