親のdivを塗りつぶすボタンでテキストフィールドを伸ばす

Question

<input type="text" class="a" />のテキストフィールドとサブミットボタン<input type="submit" value="Test" class="b" />を含むdiv <div id="ab">があります。 divの高さは固定されており、長さは100％です。テキストフィールドには特定の高さがあります。送信ボタンは特定の高さしか持っていません。私はテキストフィールドにdivの全体を伸ばして（幅で）、送信ボタンがドッキングするためのスペースを残すようにします。パーセンテージでの幅の設定は機能していません。

スタイリング;

#ab{ 
    background-color: #CCCCCC; 
    width: 100%; 
    height: 36px; 
    border: solid 1px #999999; 
} 
#ab .a{ 
    display: block; 
    float: left; 
    border: none; 
    height: 34px; 
} 
#ab .b{ 
    display: block; 
    float: left; 
    border: none; 
    width: 100px; 
    height: 36px; 
} 

のhtml;

<div id="ab"> 
    <input type="text" class="a" /> 
    <input type="submit" value="Test" class="b" /> 
</div> 

私はこれを得ています。

と私はこれをしたいです。

Hereフィドルです。

どのように私はcssを使ってこれを行うことができますか？

Answer 1

これを達成する最もクリーンな方法は、#abに固定幅を与えることです。それは純粋な数学です。

それとも、この操作を行います。あなたはその幅は、オプションのパディングを含める場合

#ab .a{ 
    width:100%; /* << */ 
    display: block; 
    float: left; 
    border: none; 
    height: 34px; 
} 
#ab .b{ 
    margin: 0 0 0 -100px; /* << */ 
    display: block; 
    float: left; 
    border: none; 
    width: 100px; 
    height: 36px; 
} 

は、さらにまた、.aにbox-sizing: border-box;を適用します。

.a { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } 

Answer 2

ボタンを100pxにして、変数を（パーセントで）変更する必要がない場合は、純粋なCSSで行う方法はありません。あなたは幅と言うことはできません。（100％-100px）ので、私はjQueryを使ってそれを設定することをお勧め：

ここでフィドルです：http://jsfiddle.net/jesseclark/rXKqv/

Answer 3

あなたはそのテーブルと

HTML

実現することができます

<div id="ab"> 
    <table> 
    <tr> 
     <td><input type="text" class="a" /></td> 
     <td class="right"><input type="submit" value="Test" class="b" /></td> 
    </tr>   
    </table> 
</div> 

CSS

#ab{ 
background-color: #CCCCCC; 
height: 36px; 
border: solid 1px #999999; 
width: 100%; 
} 
table{ 
    width:100%;  
} 
.right{ 
    width:100px; 
} 
#ab .a{ 
    display: block; 
    border: none; 
    height: 34px; 
    width:100%; 
} 
#ab .b{ 
    display: block; 
    border: none; 
    width: 100%; 
    height: 36px; 
}