2

入力フィールド/テキストフィールドの 100% の幅が含まれている div と重なるのはなぜですか?

http://jsfiddle.net/lassebjensen/Uujck/3/

CSS:

.red-div-400px{
    background-color:red;
    width:400px
}

.input{
    width: 100%;
    min-height: 28px;
}

HTML:

<div class="red-div-400px">
E-mail  
<input  class="input" type="text">
</div>

以下のコードは問題を修正しますが、オーバーラップの原因は何ですか? テキストフィールドの幅を 100% に設定できないのはなぜですか?

 width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
 box-sizing: border-box;

敬具

4

3 に答える 3

5

入力フィールドの幅にはpaddingと any のborderセットが含まれるため、100% + 1px のパディング + 2px の境界線 = オーバーラップになります。

box-sizingは、レンダリングされた入力フィールドが指定された幅になるようにするため、これを修正します。

于 2013-07-11T15:24:56.403 に答える
3

2px の境界線を忘れています (両側)。

CSS3 Calc を使用して、この問題を回避できます。

width: calc(100% - 4px);

デモ: http://jsfiddle.net/Uujck/6/

サポートしているブラウザーを確認するには、 CanIUseまたは同様のサイトを参照してください: http://caniuse.com/#feat=calc

于 2013-07-11T15:25:25.597 に答える
2

これを引き起こすのは入力のパディングとその境界です。更新された fiddleを参照してください。入力を検査すると、もう重複していないことがわかります。

.input 
{
    width: 100%;
    min-height: 28px;
    padding: 0;
    border: none;
}
于 2013-07-11T15:25:12.353 に答える