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

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 中工作）

也许您还需要使用 white-space:nowrap 和 min-width。

Answer 2

你不能单独使用 CSS 来做这件事。使用 jQuery AutoResize 插件

 $('#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;}