自动将宽度扩展到文本字段

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/ (至少适用于chrome)

也许你还需要使用空格:nowrap和min-width。

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来模拟这个行为-- http://dabblet.com/gist/3150040

HTML

<div contenteditable></div>

CSS

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