入力フィールドの幅を100％から送信ボタンの幅を引いた値にするにはどうすればよいですか？

Question

非常に基本的な1つの入力フィールドと、それに並んで「送信」ボタンがあります。検索ボタンの幅は104ピクセルです。両方ともブラウザービューポートの合計幅の50％でまとめられています。ブラウザウィンドウの拡大に合わせて入力フィールドを拡大できるようにするのが私の計画です。

現時点では、特定のブラウザウィンドウでは、入力フィールドの幅をラッパーの左側から送信ボタンの左側に広げるように修正する必要があります。しかし、ウィンドウのサイズを変更すると、それに応じて（明らかに）調整されないため、空白の隙間が残されます。

他にもこの質問に対する回答は見つかりませんでした。私はよく、通常100pxの幅で100pxの右側のパディングが他のインライン要素でこのような問題を解決することを認識しています。しかし、ここでの問題は、ボタンがパディングの上に座っているように見えず、代わりに新しい行に移動することです。

どうすれば解決できますか？ありがとう！

編集： ここまではこれまでのことです。 jsfiddle.net/nWCT8/にアクセスしてください。 ラッパー全体を中央に配置する必要があり、IE6が動作しなくても大多数のブラウザをサポートする必要があります。この理由から、私は 'calc'がきわめて適切だとは思わない。あなたが一定の高さを持っているので

Answer 1

、（あなたが必要としない場合はIE 6をサポートするために）あなたのjsfiddleでこれを達成するために

EDIT更新私の答えのベースをabsolute位置を使用することができますが、私は唯一の可能性現在のChrome、Safari、FFで今すぐテストしてください。

jsfiddle

自動あなたが100%の幅を持っていることのラッパーとinputニーズを使用する必要がFFとの適切な仕事を大きく取得します。 width以下のCSSルールに追加するinput要素のパディングを防ぐために使用する必要があります：IE 8+、クローム、オペラ7+、サファリ3+、Firefoxの：

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
-moz-box-sizing: border-box; /* Firefox, other Gecko */ 
box-sizing: border-box;   /* Opera/IE 8+ */ 

box-sizingはによってサポートされています

EDIT スタイリングinput要素があるためpaddingとmarginそれらの一般的に問題です。

1. この要素が担当するように、周囲の.form-wrapperに高さを定義し、そのpositionrelativeに設定：あなたは、次の手順を実行する必要があり、CSS3 calc機能なしで達成したい結果を持っている それに含まれる要素の位置absolute。

2. ラップの周りに容器（.input-wrapper）input要素、ラッパーは常に右側にwidth of the buttonの距離を有するleft:0px、top:0px、bottom:0pxとright:[the width of your button]その方法とabsoluteとしての地位を規定します。

3. input要素のwidthとheightを100%に設定します。 にinput要素のパディングが追加されないようにするには、box-sizingをborder-boxに設定する必要があります。

4. 設定top:0px、bottom:0pxとright:0とabsoluteにbuttonの位置とはwidth: [width of your button] CSS3をサポートする新しいブラウザについては

Answer 2

に幅を設定し、あなたが使用することができcalc()：

width: calc(100% - 50px); // change 50px to width of button 

Answer 3

html：

<div> 
    <input type="text" id="search" /> 
    <input type="button" value="Search" id="button" /> 
    <br class="clear: both;" /> 
</div> 

CSS：

* { 
    padding: 0; 
    margin: 0; 

} 

div { 
    width: 70%; 
    margin: 0 auto;  
    padding: 5px; 
    background: grey;  
} 

#search { 
    width: calc(100% - 110px);   
    float: left; 
} 

#button { 
    width: 104px; 
    float: left;  
} 

jsfiddle

Answer 4

選ばれた解答が正常に動作しますが、しかし、それはあまりに複雑です。はるかに簡単であることを答えを書き直し：

HTML：

<div class="halfWidth"> 
    <div class="input-wrapper"> 
     <input type="text" placeholder="Input text here"/> 
    </div> 
    <button type="submit">Search</button> 
</div> 

CSS：

.halfWidth { 
    width:50%; 
} 
.input-wrapper { 
    margin-right:100px; 
} 
input { 
    float: left; 
    width: 100%; 
    -ms-box-sizing: border-box; /* ie8 */ 
    -khtml-box-sizing: border-box; /* konqueror */ 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
    -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
    box-sizing: border-box;   /* Opera/IE 8+ */ 
    box-sizing: border-box; /* css3 rec */ 
} 

ビューの例では：
http://jsfiddle.net/nWCT8/4/