文本框填充空间 [英] Textbox to fill space

问题描述

请考虑以下内容。

2 DIVS - 左边一个已知宽度，右边一个未知宽度。

我们可以使右边填充剩余空间，但是如果我将右边的DIV交换到一个文本框，那么它不会填充空间，而是在左边的div下面。

这里是一个小提琴：示例

 < div> 
< div id =left> 
 left 
< / div> 
< input type =textboxid =right> 
 right 
< / input> 
< / div> 
 
 #left {
 float：left; 
 width：180px; 
 background-color：＃ff0000; 
} 
 #right {
 width：100％; 
 background-color：＃00FF00; 
} 
  

我很困惑 - 有任何建议吗？

仍然不能达到应有的效果！

新小提琴在这里： updated fiddle

解决方案

JSFiddle
输入内联bydefault，只有
块级元素可以获取剩余空间后一个浮动元素。因此，您应该更改显示属性以输入到块 ie display：block

  #left {float：left; width：180px; background-color：＃ff0000; } #right {display：block; background-color：＃00FF00; }  

 < div& < div id =left>左< / div> < input type =textboxvalue =rightid =right/> < / div> 
     http://jsfiddle.net/naeemshaikh27/MHeqG/1522/ =nofollow> http://jsfiddle.net/naeemshaikh27/MHeqG/1522/ 使用Calc。
 
Consider the following.

2 DIVS - the left one of known width, the right one of unknown width.

We can make the right-hand side fill the remaining space, however if I exchange the right-hand DIV to a textbox, it then does not fill the space, but wraps below the left-hand div.

Here's a fiddle: example
<div>
    <div id="left">
        left
    </div>
    <input type="textbox" id="right">
        right
    </input>
</div>

#left {
    float:left;
    width:180px;
    background-color:#ff0000;
}
#right {
    width: 100%;
    background-color:#00FF00;
}
I'm confused - any advice?

Still not behaving as it should!

New fiddle here: updated fiddle
解决方案
JSFiddle
Inputs are inline bydefault and only the
Block level elements can aquire the remaining space left after a floating element. So you should change the display property for input to block i.e. display:block



 #left {
     float:left;
     width:180px;
     background-color:#ff0000;
 }
 #right { 	
     display:block;
     background-color:#00FF00;
 }

 <div>
     <div id="left">
         left
     </div>
     <input type="textbox" value="right" id="right"/>
 </div>
       





EDIT:  http://jsfiddle.net/naeemshaikh27/MHeqG/1522/ using Calc.

                        
这篇关于文本框填充空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！