如何使输入元素占据所有剩余的水平空间？ [英] 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; ：为什么是必要的：

• http://colinaarts.com/articles/the-magic-of-overflow-hidden/#making-room-for-floats


• CSS块如何格式化上下文工作？

输入必要是因为 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屋！