文本字段的動態調整大小

我正在編寫的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/

有什麼辦法讓輸入文本框動態調整大小，並且仍然適合我想要的位置？

來源

2013-07-10 Chase Sandmann

根據這一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

來源

2013-07-10 22:13:19

雖然這是一個非常酷的效果（我將不得不記住，以備將來參考），這不是我真正想要的。基於當前在該領域的當前投入重新調整大小，但我正在尋找該領域以始終佔用最大可用空間。 –

你有沒有試過把它當作桌子？ –

更新[JSfiddle]（http://jsfiddle.net/ahmedadil1000/G9pDw/1/） –

文本字段的動態調整大小

回答

相關問題