CSS使宽度：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”。
我希望所有这些都在一行上 ，如果窗口变宽，文本输入应该变宽。 我如何在没有表的情况下做到这一点
没有设置确切的宽度就不能完成。
将精确宽度设置为左列和右列，也将边距设置为居中div。 这是我的解决方案
的jsfiddle
http://jsfiddle.net/xe4EJ/2/
码
<div style="float:left; width:200px; background-color:red"><p>LEFT</p></div>
<div style="float:right; width:200px; background-color:red"><p>RIGHT</p></div>
<div style="margin:0 210px 0 210px"><p>
<input type="text" style="width:80%" />
<input type="submit" />
<a href="">Link</a>
</p></div>
请参阅： 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;
}
您需要将所有内容浮动到左侧，并在div上使用一些相对值。
<div style="float:left; margin-right: 20px; width: 20%;"><p>LEFT</p></div>
<div style="float:left; margin-right: 20px; width: 20%;"><p>RIGHT</p></div>
<div style="float:left; margin-right: 20px; width: 50%;"><p>
<input type="text" style="width:60%; " />
<input type="submit" style="display:inline; width: 55px;" />
<a href="">Link</a>
</p></div>
你可以在这里看到
当页面达到一定的狭窄程度时，这将会中断，因此您可能必须在您的身体上设置最小宽度。
链接地址: http://www.djcxy.com/p/89163.html