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是在第一行上结束了，则文本输入占用整个第二线，和“提交”和“链接”位于第三行。

我想所有这些都在一行，如果窗口被加宽，文本输入应该加宽。我如何在没有桌子的情况下这样做？

Answer 1

如果不设置确切的宽度，就不能完成。

将精确宽度设置为左列和右列，也将边距设置为居中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>​ 

Answer 2

你需要的一切漂浮到左边，并在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>​ 

你可以看到here

网页时获得一定的狭隘性，这将打破，所以你可能需要设置对你的身体最小宽度。

Answer 3

最好是浮动的每一个元素离开，然后你必须给每一个元素的宽度：

<div style="width:100%"> 
    <div style="float:left;width:10%"><p>LEFT</p></div> 
    <div style="float:left;width:80%"> 
     <p style="clear:both"> 
      <input type="text" style="float:left;width:79%" /> 
      <input type="submit" style="float:left;width:10%" /> 
      <a href="" style="float:left;width:10%">Link</a> 
     </p> 
    </div> 
    <div style="float:left;width:10%"><p>RIGHT</p></div> 
</div> 

Answer 4

一个更好的方法（建设关oftrl13的解决方案）将文本输入隔离在自己的股利和移动链接和提交按钮坐静右浮动的DIV中：

<div style="float:left; width:200px; background-color:red"><p>LEFT</p></div> 

<div style="float:right; width:300px; background-color:red"> 
    <input type="submit" /> 
    <a href="">Link</a> 
    RIGHT</div> 

<div style="margin:0 310px 0 210px"><p> 
    <input type="text" style="float:left; width:100%; display:run-in;" /> 

</p></div> 

See it in at work

Answer 5

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

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

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

box-sizing: border-box使文本input完全符合其包含span的宽度。

overflow: hidden正在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; 
}