html - 幅をテキストフィールドに自動拡張

Question

ブラウザの幅に基づいて自動拡張してテキストフィールドを取得する方法（純粋なcssを使用）。たとえば、ブラウザを最小幅に拡大縮小した場合、テキストフィールドも2行目にジャンプしないはずです。

私はそれがこの画像でどのように示されているかとまったく同じように必要です

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/ (少なくとも chrome で動作します)

たぶん、空白:nowrap と最小幅をいじる必要があるかもしれません。

Answer 2

CSSだけでそれを行うことはできません。jQueryAutoResizeプラグインを使用する

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

Answer 3

私の知る限り、入力用のCSSだけでは実行できませんが、 with属性を使用してこの動作をエミュレートできます-デモhttp://dabblet.com/gist/3150040divcontenteditable

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;}