自動將寬度擴展爲文本字段

Question

如何根據瀏覽器寬度（使用純CSS）自動擴展文本字段。例如，如果我將瀏覽器縮小到最小寬度，文本字段也不應該跳到第二行。

我需要酷似它是如何這個圖像

Answer 1

不是100％肯定它預期的效果，但對於某些瀏覽器，這可能是你在找什麼：

HTML：

<p> 
<label>Test</label> 
<span><input></span> 
</p>​ 

和CSS：

label{width:200px;float:left;} 
span{display:block;width:100%;box-sizing:border-box;padding-left:200px;} 
input{width:100%;box-sizing:border-box;}​ 

示例：http://jsfiddle.net/48fNt/（至少在鉻中工作）

也許你還需要玩白空間：nowrap和一個最小寬度。

Answer 2

中顯示你不能用CSS獨自做到這一點。使用 jQuery AutoResize Plugin

$('#myTextBox').autoResize({ 
     onResize : function() { 
      //Do something on resize 
     }, 
     animateCallback : function() { 
      //Do something after resize 
     }, 
     animateDuration : 300,//Duration 
     extraSpace : 40//Extra Space 
    }); 

Answer 3

據我所知，你不能只爲輸入CSS做到這一點，但你可以模擬這種行爲使用div與contenteditable屬性 - 演示http://dabblet.com/gist/3150040

HTML

<div contenteditable></div> 

CSS

div { 
    min-width: 150px; 
    width: auto; 
    border: solid 1px #ccc; 
    display: inline-block; 
} 

Answer 4

有一個以上的方法可以達到這個位置
http://jsfiddle.net/rHqE7/4/

<div id="wrap"> 
<div id="name">Name</div> 
<input type="text" name="fname" id="text" /> 
</div>​ 

#wrap{width:500px;overflow:auto;}​ 
#name{float:left;width:100px;font-size:16pt;padding:10px 5px;} 
#text{float:left;min-width:300px;max-height:20px;border:1px solid black;padding:3px;}