CSS使一个宽度：100％停止浮动对象 [英] CSS make a width:100% stop against floating objects

问题描述

尝试此操作：

<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，文本输入占据整个第二行，提交和链接在第三行。

This ends up with LEFT and RIGHT being on the first line, the text input taking up the whole of the second line, and "Submit" and "Link" being on a third line.

我想所有这些都在一行 ，如果窗口加宽，则文本输入应该加宽。

I want all of these to be on one line, and if the window is widened, the text input should widen. How do I do this without tables?

推荐答案

如果没有设置精确的宽度，就无法完成。

将精确宽度设置为左右列，还将边距设置为中心div。这是我的解决方案

Set exact width to left and right columns, also margin to center div. Here is my solution

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

这篇关于CSS使一个宽度：100％停止浮动对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！