5

私はこれを持っています：

<div class="wrapper">
    <input type="text"/>
</div>

div{
    border: 1px solid red;
    width: 300px;
}

input{
    width: 100%;
    padding: 10px;
}

入力が親 div の 100% である必要がありますが、この入力には 10px のパディングも必要です。結果はここで見ることができます: http://jsfiddle.net/pdJYF/

どうすればこれを達成できますか？

4

3 に答える 3

18

入力フィールドに追加box-sizingします。

input{
       -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    width: 100%;
    padding: 10px;
}

根底にある「問題」は、HTML/CSS のボックス モデルです。それぞれの MDN 記事の図でわかるように、各要素のボックスには、マージン ボックス、ボーダー ボックス、パディング ボックス、およびコンテンツ ボックスの 4 つの異なる領域があります。

widthメジャー (または) を要素に割り当てるheightと、これらの領域の 1 つに適用されます。領域がコンテンツ ボックスなどの場合、要素のマージン、ボーダー、およびパディングの合計サイズが追加されます。したがって、ボックスの合計寸法を設定するのではなく、含まれているボックスの 1 つを設定します。

CSS プロパティbox-sizingは、要素の寸法を計算するときに、どのボックスを使用するかをブラウザに伝えます。デフォルト値は ですcontent-box。したがって、上記の例では、margin、border、および padding の値が追加されるため、要素が大きすぎます。ボックス モデルを に設定するとborder-box、余白のみが寸法 (ここではゼロ) に追加され、要素が収まります。

于 2013-05-28T13:00:53.303 に答える
1

左右のパディングを 2 倍に減らし、このように使用したいピクセルの 2 倍を減らし、入力の幅を挿入する必要があります。

例: 20px (左右の余白) + 2px (左右の境界線)= 22px

300px - 22px = 278px

div { ボーダー: 1px 単色の赤; 幅:300px; }

入力 { 幅: 278px;パディング: 10px; }

于 2013-05-28T13:12:45.437 に答える