水平CSS - ボタンの入力フィールド100％と余白

Question

タスク：テキストボックスを100％幅にしますが、ボタンのための十分なスペースを確保します。

問題：ボタンが次の行に表示され、テキストボックスがそのコンテナの幅を超えています。

<div class="field"> 
    <input type="text" name="my-field" /> 
    <input type="button" id="my-button" value="Add +" /> 
</div> 

.field { 
    margin-right: -70px; 
    width: 100%; 
} 
.field input[type=text] { 
    display: block; 
    float: left; 
    margin-right: 70px; 
} 
.field input[type=button] { 
    display: block; 
    float: right; 
} 

私のプライマリレイアウトは、固定サイドバーで柔軟な幅を実現するために次のトリックを使用しますが、何らかの理由でこれが上手く機能しません。

<div class="outer-wrap"> 
    <div class="content"> 
     ... 
    </div> 
    <div class="sidebar"> 
     ... 
    </div> 
</div> 

.outer-wrap { 
    margin-right: -300px; 
    width: 100%; 
} 
.content { 
    float: left; 
    margin-right: 300px; 
} 
.sidebar { 
    float: right; 
} 

ここで間違いがありますか？

Answer 1

あなたはHTMLをちょっとねじにする必要がありますが、それ以外の場合はIE7 +や最新のブラウザでは完全に機能します。

を参照してください：http://jsfiddle.net/thirtydot/25bZC/

CSS：

.field > span { 
    display: block; 
    overflow: hidden; 
    padding-right: 10px 
} 
.field input[type=text] { 
    width: 100% 
} 
.field input[type=button] { 
    float: right 
} 

HTML：

<div class="field"> 
    <input type="button" id="my-button" value="Add +" /> 
    <span><input type="text" name="my-field" /></span> 
</div> 

Answer 2

あなたは要素はあなたが右に浮いていることを確認する必要があり、これをやってのけます1つのfの前に来る左が気になる。このよう

<div class="field"> 
    <input type="button" id="my-button" value="Add +" /> 
    <input type="text" name="my-field" /> 
</div> 

Answer 3

は、それはあなたが望む結果を達成するために、このようなトリックをプルする必要があるときにレイアウトにテーブルを使用しても大丈夫だ

field input[type=text] 

と

.field input[type=button]