2

私は持っている：

<div>
    <input id="input" type="text" />
    <button id="submit">submit</button>
</div>

これは私にこれを与えます ここに画像の説明を入力

メインパネルをマウスカーソルでドラッグして拡張すると、新しいスペースの幅が空になります:

ここに画像の説明を入力

<input type="text" />水平方向の新しいスペース全体を埋めるが、送信ボタンは同じ行に残るようにしたい。

使うのに疲れまし<input style="width:100%" type="text"/>たが、行全体がいっぱいになり、送信ボタンが次の行に表示されます。

ここに画像の説明を入力

そのスレッドで言及されているように、テーブルも試しました: Liquid textfield width

その結果、送信ボタンが入力テキストと重なって「少し」機能し、右側の特定のスペースが常に空のままになります。 ここに画像の説明を入力

送信ボタンの（静的）サイズを除いて、スペース全体を埋めるためのコードのアイデアを誰かが手伝ってくれませんか。

ありがとう！

4

3 に答える 3

2

リンク先の「テーブル」メソッドは機能しますが、入力要素に重要なプロパティが 1 つ欠けています: box-sizing です。

http://cssdeck.com/labs/sbffl3l2

<div class="foo">
  <div class="bar"><input type="text"></div>
  <div class="bar"><input type="submit"></div>
</div>

.foo {
  display: table;
  width: 100%;
}

.bar {
  display: table-cell;
}

.bar:first-child, input[type="text"] {
  width: 100%;
}

input {
  box-sizing: border-box; /* this is the key */
}

プレフィックスが必要な場合があります: http://caniuse.com/#feat=css3-boxsizing

于 2013-06-18T17:33:01.530 に答える
1

私はあなたがこれを行うことができると信じています:

<input type="text" style="width:calc(100%- widthofbuttoninpixels);" />

ただし、インライン スタイルを使用することはお勧めできません。

編集：ボタンの固定幅も定義してください

于 2013-06-18T17:21:28.970 に答える