0

私が書いている Web アプリの一部は、私が望むように本当に見栄えを良くするのに特に苦労しています。テキスト、入力テキスト ボックス、および送信ボタンを含むフォームの横に固定幅のボタンがあります。画面の幅に基づいて入力ボックスの幅を変更したいのですが、ピースが次の行に落ちないようにする方法がわかりません。

これが問題のフィドルです：http://jsfiddle.net/Yt3V2/

HTML:

<div class="wrapper">
  <button type="button" class="new_button">Create New</button>
  <form name="input" action="" method="post">
    Search: 
    <input type="text" class="search_input"></input>
    <input type="submit" value="Submit"></input>
  </form>
</div>

CSS:

.new_button
{
  float: left;
  min-width: 120px;
}

.search_input
{
  width: /* What could go here? */;
}

多くの提案には、CSS からテーブルを作成することが含まれていました。

入力テキスト ボックスのサイズを動的に変更し、必要な場所に収まるようにする方法はありますか?

4

1 に答える 1

2

この質問によると：変更してみてください：

 <input type="text" class="search_input"></input>

に

<input type="text" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';"></input>

JSFiddle

**更新しました*************************

新しい JSfiddle

于 2013-07-10T22:13:19.607 に答える