如何使输入元素占据所有剩余的水平空间? [英] How do I make an input element occupy all remaining horizontal space?
问题描述
以下是代码:
< div style =width:400px>
some text ..
< input type =text/>
< button value =click me/>
< / div>
如何使输入元素扩展以填充所有剩余空间,同时保持在同一行?
如果我把100%换成自己的一行...
http://jsfiddle.net/thirtydot/rQ3xG/466/ p>
这适用于IE7 +和所有现代浏览器。
.formLine {overflow:hidden;背景:#ccc;}。formLine input {width:100%;}。formLine label {float:left;} formLine span {display:block; overflow:hidden; padding:0 5px;}。formLine button {float:right;}。formLine input,.formLine button {box-sizing:border-box;}
< div class =formLine> < button>点击我< / button> < label>一些文字..< / label> < span>< input type =text/>< / span>< / div>
按钮
必须位于HTML的第一位。
关键的一步是使用 overflow:hidden;
:为什么是必要的:
输入
必要是因为 display:block; 对
输入没有效果。
: CSS / DOM中是什么带有显示的输入框:从扩展到其容器大小的块
Here's the code:
<div style="width:400px">
some text..
<input type="text" />
<button value="click me" />
</div>
How can I make the input element expand to fill all the remaining space, while staying on the same line? If I put 100% it goes to a line of its own...
See: http://jsfiddle.net/thirtydot/rQ3xG/466/
This works in IE7+ and all modern browsers.
.formLine {
overflow: hidden;
background: #ccc;
}
.formLine input {
width: 100%;
}
.formLine label {
float: left;
}
.formLine span {
display: block;
overflow: hidden;
padding: 0 5px;
}
.formLine button {
float: right;
}
.formLine input, .formLine button {
box-sizing: border-box;
}
<div class="formLine">
<button>click me</button>
<label>some text.. </label>
<span><input type="text" /></span>
</div>
The button
must go first in the HTML. Slightly distasteful, but c'est la vie.
The key step is using overflow: hidden;
: why this is necessary is explained at:
- http://colinaarts.com/articles/the-magic-of-overflow-hidden/#making-room-for-floats
- How does the CSS Block Formatting Context work?
The extra span around input
is necessary because display:block;
has no effect for input
: What is it in the CSS/DOM that prevents an input box with display: block from expanding to the size of its container
这篇关于如何使输入元素占据所有剩余的水平空间?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!