動的な幅のテキストボックス

Question

私はそれがコンテンツの周りに崩壊したい/ divのような内容で成長するように、テキストボックス入力コントロールに動的な幅を持つ方法を見つけることができないようです。

は、私が表示しようとしました：

...などDynamic width for input text box (HTML)など、さまざまな記事を読んで、それが働いて得ることができない...最小幅と最大幅をいじってみました...インライン私はそれをしたいですこのように見えるが、私は私がいないハードコード幅（9999.99の間のスペースの不足やワードトン気づく）ことができ、それが動的にそれは幅だサイジングたい：

<div style="width:420px;background-color:red"> 
    Gross Weight Unit: 
    <select> 
     <option value="volvo">Volvo</option> 
     <option value="saab">Saab</option> 
     <option value="mercedes">Mercedes</option> 
     <option value="audi">Audi</option> 
    </select> 
    Total Gross Weight: <input style="border:0;background:transparent;width:50px" type="text" name="lname" value="9999.99"> tonnes 
</div> 

表示：インラインは動作しませんが（9999.99と単語tonnesの間のスペースに気をつけてください、それは大きすぎます）

<div style="width:420px;background-color:red"> 
    Gross Weight Unit: 
    <select> 
     <option value="volvo">Volvo</option> 
     <option value="saab">Saab</option> 
     <option value="mercedes">Mercedes</option> 
     <option value="audi">Audi</option> 
    </select> 
    Total Gross Weight: <input style="border:0;background:transparent;display:inline" type="text" name="lname" value="9999.99"> tonnes 
</div> 

の最大幅は、所望の効果を与えるものではありません、それは単に関係なく、それのコンテンツの100pxにまで成長（9999.99とワードトンの間のスペースに気づく、それはあまりにも大きいです）：

<div style="width:420px;background-color:red"> 
     Gross Weight Unit: 
    <select> 
     <option value="volvo">Volvo</option> 
     <option value="saab">Saab</option> 
     <option value="mercedes">Mercedes</option> 
     <option value="audi">Audi</option> 
    </select> 
    Total Gross Weight: <input style="border:0;background:transparent;max-width:100px" type="text" name="lname" value="9999.99"> tonnes 
</div> 

はそれが可能です？もしそうなら、どのように？

Answer 1

は私が**質問自体に**このJavaScriptライブラリは、それを再現するために必要な最短のコードが含まれている必要があり、コードの助けを求めるhttp://kamilkp.github.io/autoheight/