css - 文本字段的动态调整大小

Question

我正在编写的一个 Web 应用程序的一部分特别痛苦，要使它看起来像我想要的那样非常漂亮和整洁。我在包含文本、输入文本框和提交按钮的表单旁边有一个固定宽度的按钮。我希望输入框的宽度根据屏幕的宽度调整大小，但我不知道如何才能不让一 block 落到下一行。

这是问题的一个 fiddle :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 制作表格，这让我很接近，但文本框仍然会被截断:http://jsfiddle.net/G9pDw/

有什么方法可以让输入文本框动态调整大小并仍然适合我想要的位置吗？

Answer 1

根据这个question : 尝试改变 :

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

到

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

JSFiddle

**已更新***************************

New JSfiddle