如何使输入元素占据所有剩余的水平空间？

Question

这是代码:

<div style="width:400px">
    some text..
    <input type="text" />
    <button value="click me" />
</div>

如何使输入元素展开以填充所有剩余空间,同时保持在同一条线上？如果我把它100%放到它自己的线上......

Answer 1

请参阅: http ://jsfiddle.net/thirtydot/rQ3xG/466/

这适用于IE7 +和所有现代浏览器.

.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>

在button首先必须走在HTML.有点令人反感,但是很喜欢.

关键步骤是使用overflow: hidden;:为什么这是必要的解释如下:

• http://colinaarts.com/articles/the-magic-of-overflow-hidden/#making-room-for-floats
• CSS块格式化上下文如何工作？

额外的跨度input是必要的,因为display:block;对以下内容没有影响input:CSS/DOM中有什么阻止带有显示的输入框:块扩展到其容器的大小