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 sizing を使用してみてください

<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 に答える