divの右側にあるボタンを使用してdivの空き領域を入力してください

Question

divの入力に空きスペースが残っていますか？

<div> 
    <input type="text"/> 
    <button>button</button> 
</div> 

それは簡単なようだが、私はそれを行うための方法を見つけることができません...ここjsfiddle

：あなたは表示テーブル/テーブルセルを使用することができますhttp://jsfiddle.net/LLQQQ/

Answer 1

。これはテーブルベースのレイアウトではないので、人々はそれについてふたをしていません。 divをテーブルとして表示するように設定し、直後の子孫セレクタ> *を使用して、すべての直接の子をセルとして動作させます。次に、セルの幅を指定することができ、幅を最大限に取るために最善を尽くします。それ以外の場合は縮小するので、私はスパンでボタンをラップする必要がありました。

http://jsfiddle.net/LLQQQ/6/

<div> 
    <input type="text"/> 
    <span><button>button</button></span> 
</div> 

div { 
    border: 1px solid #000; 
    display: table; 
    width: 100%; 
} 

div > * { display: table-cell; } 

div > span { width: 1%; } 
div > input { width: 100%; }