divを含むHTML入力要素

Question

div内にhtml要素が含まれています。高さは外側divによって指定され、入力コントロールの高さと幅は100％です。最も基本的なレベルでは、テキストボックスが含まれているdivの右側を超えているという問題が発生しています。

基本のコード例：

<div style="height:25px; width: 150px;"> 
    <input type="text" style="height:100%; width:100%" /> 
</div> 

このコントロールのレンダリングがはるかに複雑これより、まだコントロールがこのレベルまで取り除かれたとき、私は、テキストボックスを過ぎて突き出問題を持っていますdivを含む

Answer 1

代わりのinput要素に直接スタイルを適用すること、多分抽象ファイルと使用クラスにCSS：

div.field_container 
{ 
    height: 25px; 
    width: 150px; 
} 

div.field_container input 
{ 
    height: 100%; 
    width: 100%; 
} 

<div class="field_container"> 
    <input type="text" name="" value="" /> 
</div> 

これはまったく助け場合、私はテストすることができ前に、私はドアの外に実行していますが、最低でも、私の解決策がうまくいかない場合、DIV CSSの最大高さ/幅の設定で再生できます。このようにCSSを抽象化すると、FirefoxのFirebugのようなプラグインを使って問題を解決しやすくなります。

質問には、入力タグを独自のDIVで囲む必要がありますか？これを行う必要性を避けるより良いレイアウトがあれば、私は驚かないでしょう...

Answer 2

私は、含まれている要素（<input>）を全体が<div>に含まれていますか？

次のいずれかが可能です。

input {width: 50%; /* or whatever */ } 

すでに持つものとして入力を定義した場合は、HTML要素の幅は、（私が思う）定義された幅+ボーダー+マージン+パディング

のように計算されます親の100％の幅、そして他の属性が追加されると、間違いなく親divがオーバーフローします。

マージン/パディング/ボーダーを0に設定しても、見栄えが悪くなる可能性があります。したがって、の方が簡単です。は必ずしも適切ではありませんが、適切に小さい幅を使用するだけです。

あなたは、もちろん、通常のコンテナのdivをオーバーフローする入力要素の一部を非表示にする

#parent_div {overflow: hidden; /* or 'auto' or whatever */} 

を使用することができます。

Answer 3

残念ながら、これは作業しているブラウザによって異なりますが、オブジェクトの幅（テキストボックス）を設定しても、オブジェクトの境界の幅は考慮されません。ほとんどのブラウザは、外側のオブジェクトからの余白と含まれているオブジェクトからの余白を考慮に入れますが、いくつか（私はIEを見ています）は、パーセントを計算するときに境界線に追加しません。

あなたの最善の策は、テキストボックスの境界線を変更したり（私は境界線の幅で推測している）margin-top: -2pxとmargin-left:-2pxと言うの2ピクセルのパディングとtehのテキストボックスとコンテナの間、別のdivの中で投げることです

Answer 4

この投稿はかなり古いですが、よくある問題です。誰も良い回答を投稿していません...

次のHTMLコードは問題なく表示されます。しかし、私は、DOCTYPEを追加するとき、問題は、幅/高さの問題を解決するには

div.field_container 
{ 
    height: 25px; 
    width: 150px; 
    border: 1px solid red; 
} 
div.field_container input 
{ 
    height: 100%; 
    width: 100%; 
} 
<div class="field_container"> 
    <input type="text" name="" value="" /> 
</div> 

表示され、あなたのfield_containerにパディングを追加することができますが、それは、コンテナが大きくなります。

div.field_container 
{ 
    height: 25px; 
    width: 150px; 
    padding-bottom: 6px; 
    padding-right: 4px; 
    border: 1px solid red; 
} 
div.field_container input 
{ 
    height: 100%; 
    width: 100%; 
} 
<div class="field_container"> 
    <input type="text" name="" value="" /> 
</div> 

あなたは、コンテナの幅を変更することができない場合は、次のトリックを使用することができますが、それはまだあなたはボックスのサイズ変更に使用することができます

div.field_container 
{ 
    height: 25px; 
    width: 150px; 
    padding-bottom: 6px; 
    border: 1px solid red; 
} 
div.field_container input 
{ 
    height: 100%; 
    width: 100%; 
} 
<div class="field_container"> 
    <div style="height: 100%; margin-right:4px"><input type="text" name="" value="" /></div> 
</div> 

Answer 5

高さを増加します：にボーダーボックスをこれを世話してください。ちょうどあなたのCSSファイルに次のように置く：

input{box-sizing:border-box} 

入力ボックスの境界線ではなく外側に追加されているよりも、入力の幅の内側に実際にあることを意味します。これは入力をコンテナよりも大きくするものです。

ポール・アイリッシュはhttp://paulirish.com/2012/box-sizing-border-box-ftw

彼はパディングも国境の申請について作るポイントをこの手法を説明する本当に良い記事を持っています。

旧式のブラウザをサポートしやすくするコンパスのミックスインもあります。 （http://compass-style.org/reference/compass/css3/box_sizing/）

Answer 6

これは私のために仕事をした：

input { 
    padding: 0.2em; 
    box-sizing: border-box; 
    width: 100% 
}