css - 入力要素がブロック要素のように表示されない原因は何ですか?

Question

http://jsfiddle.net/aam7J/

入力要素で div のような動作を誘導するにはどうすればよいですか? 具体的には、マージンを含む外側の幅がコンテナを埋めるように幅を拡張するにはどうすればよいですか? width: 100%他のボックス モデルの属性が考慮されていないため、機能しません。

Answer 1

「ハック」を使用して、このような入力ボーダー幅を考慮します...

<div>hello world</div>
​
<div class="adjustForTheInputBorder">
    <input type="text" />
</div>


input 
{
    width:100%; 
    border-width:2px; 
}

div.adjustForTheInputBorder
{ 
    margin-right: 4px;  /* or 2x whatever your input border width is */
}

div 
{
    background-color: pink;
}

私adjustForTheInputBorderのクラスは、私のcssへの憎しみをより適切に伝える名前を持つ傾向があります... :)

PSはデフォルトでdivレンダリングさdisplay:blockれるため、その必要はありません。