CSS创建一个宽度:100%停止浮动对象

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位于第一行,文本输入占据整个第二行,"Submit"和"Link"位于第三行.

我希望所有这些都在一行上,如果窗口加宽,文本输入应该加宽.没有桌子我该怎么做？

Answer 1

请参阅: http ://jsfiddle.net/thirtydot/mSwBe/

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

它在IE7上足够接近(不支持box-sizing: border-box,但在这种情况下,这可以很容易地解决).

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

overflow: hidden正在非常有用的.

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