0

我正在尝试将文本框的宽度设置为 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>

4

4 回答 4

3

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

于 2013-02-06T10:32:49.990 回答
0

尝试在您的输入上使用 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/

于 2013-02-06T10:36:48.413 回答
0

<input>in的默认边框样式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"/>

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

于 2013-02-06T10:59:15.623 回答
0

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

于 2013-02-06T11:07:37.047 回答