Question

我正在编写一个Web应用程序的一部分，这使得看起来非常好看并且像我想要的那样整洁。我有一个固定宽度的按钮旁边一个包含文本，输入文本框和提交按钮的表单。我希望输入框的宽度根据屏幕的宽度调整大小，但我不知道怎么做而不会让一个片落到下一行。

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

文本字段的动态调整大小

1 个答案: