CSS 对浮动对象设置 width:100% 停止

尝试这个：

<div style="float:left"><p>LEFT</p></div>
<div style="float:right"><p>RIGHT</p></div>
<div><p>
    <input type="text" style="width:100%" />
    <input type="submit" />
    <a href="">Link</a>
</p></div>

最终，LEFT 和 RIGHT 位于第一行，文本输入占据整个第二行，“Submit”和“Link”位于第三行。

I want 所有这些都在一条线上，如果窗口变宽，则文本输入也应该变宽。如果没有表格，我该如何做到这一点？

See: http://jsfiddle.net/thirtydot/mSwBe/ http://jsfiddle.net/thirtydot/mSwBe/

这适用于所有现代浏览器。

在 IE7 上已经足够接近了（不支持box-sizing: border-box http://caniuse.com/css3-boxsizing，但在这种情况下，这可以很容易地解决）。

box-sizing: border-box http://dev.w3.org/csswg/css3-ui/#box-sizing使文本input正好适合其包含的宽度span.

overflow: hidden正在很有用 http://colinaarts.com/articles/the-magic-of-overflow-hidden/#making-room-for-floats.

HTML:

<div id="left"><p>LEFT</p></div>
<div id="right"><p>RIGHT</p></div>
<div id="middle">
    <span id="buttonContainer">
        <input type="submit" />
        <a href="">Link</a>
    </span>
    <span id="textContainer">
        <input type="text" />
    </span>
</div>

CSS:

#left, #right, #middle {
    padding: 5px;
}
#left {
    float: left;
    background: #0ff;
}
#right {
    float: right;
    background: #0ff;
}
#middle {
    background: #f0f;
    overflow: hidden;
}

#middle input { 
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

#textContainer {
    overflow: hidden;
    display: block;
}
#textContainer input {
    width: 100%;
}
#buttonContainer {
    float: right;
}