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。