自动将宽度扩展到文本字段 [英] Auto extend width to text field
问题描述
如何使用基于浏览器宽度的自动扩展来获取文本字段(使用纯CSS).例如,如果我将浏览器缩放到最小宽度,则文本字段也不应跳至第二行.
我完全需要此图像中的显示方式
不是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和最小宽度.
How to get the text field with auto extend based on the browser width (with pure css). For example if I scale the browser to minimum width also the text field should not jump to the second line.
I need exactly like how it is shown in this image
Not 100% sure it's the desired effect but for some browsers this might be what you're looking for:
html:
<p>
<label>Test</label>
<span><input></span>
</p>
And 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;}
Example: http://jsfiddle.net/48fNt/ (works in at least chrome)
Maybe you also still need to play around with white-space:nowrap and a min-width.
这篇关于自动将宽度扩展到文本字段的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!