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 制作一个表格，这让我非常接近，但文本框仍然会被切断：http: //jsfiddle.net/G9pDw/

有没有办法让输入文本框动态调整大小并且仍然适合我想要的位置？

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 回答