ベースとして次のマークアップがあります。
<div>
<span>some dynamic text</span>
<input type="text" />
</div>
入力をテキスト (常に 1 行ですが、長さは異なります) と一列に表示し、テキストの長さに応じて使用可能な幅を消費します。マークアップは必要に応じて変更できます。両方の要素は、親要素の幅の 100% である必要があります。
CSSを使用してテーブルの動作をシミュレートできます。
HTML:
<div class = "container">
<div class = "text">Glee is awesome!</div>
<div class = "inputtext"><input type="text" /></div>
</div>
CSS:
.container {
display: table;
width: 100%; /*how much should both the text and the input take*/
}
.container .text {
white-space: nowrap;
display: table-cell;
width: 1px; /*make sure it's only as wide as needed*/
}
.container .inputtext {
display: table-cell;
}
.container input {
width: 100%; /*let the input take all available space*/
}
小さなデモ:小さなリンク。
このメソッドはフローティングに依存しています。
HTML:
<div class = "text">Glee is awesome!</div>
<div class = "inputtext"><input type = "text" /></div>
CSS:
.text {
float: left;
}
.inputtext {
overflow: hidden; /*this is the key here*/
}
input {
width: 100%;
}
もう1つの小さなデモ:小さなリンク。