html - CSS使宽度为:100% stop against floating objects

Question

试试这个:

<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 位于第一行，文本输入占据了整个第二行，“提交”和“链接”位于第三行。

我希望所有这些都在一行上，如果窗口加宽，文本输入也应该加宽。如果没有表格，我该怎么做？

Answer 1

参见: http://jsfiddle.net/thirtydot/mSwBe/

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

它在 IE7 上足够接近( no support for box-sizing: border-box ，但在这种情况下可以很容易地解决)。

box-sizing: border-box使文本 input 恰好适合其包含的 span 的宽度。

溢出:隐藏 正在 very useful .

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;
}