html - コンテナ幅全体をカバーする、互いに隣接する入力要素

Question

私がこれまでに書いた中で最も自明なタイトルではありません。

私がやろうとしていること (このフィドルを参照) は、テキスト フィールドとボタンを互いに隣り合わせ (余白なし) のままにし、ボタンを右側に配置し、テキスト フィールドが残りの幅の 100% をカバーするようにすることです。ボタンが占めていないコンテナ。含まれている要素のサイズが変更されても、2 つの関係は維持される必要があります。

ブラウザ要件: IE9+、Firefox、Webkit

Answer 1

この小さなデモをチェックしてください：小さなリンク。コードはかなり自明ですが、基本的な考え方は次のとおりです。

<div class = "container">
    <div class = "cell">
        <input type="text" placeholder="Glee's awesome!" />
    </div>
    <div class = "cell" style = "width: 1px"> <!--make sure it's only large enough to fit the button-->
        <button type="submit">Glee</button>
    </div>
</div>

CSS：

.container {
    display: table;
    width: 100%;
}
.cell {
    display: table-cell;   
}

お役に立てば幸いです。