用于填充空间的文本框

考虑以下。

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

我们可以让右侧填充剩余空间，但是如果我将右侧 DIV 交换到文本框，它不会填充空间，而是包裹在左侧 div 下方。

这是一个小提琴：example http://jsfiddle.net/MHeqG/1506/

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

我很困惑 - 有什么建议吗？

还是没有表现出应有的样子！

新小提琴在这里：更新了小提琴 http://jsfiddle.net/MHeqG/1517/

JSFiddle http://jsfiddle.net/naeemshaikh27/MHeqG/1508/默认情况下，输入是内联的，并且只有 块级元素可以获得浮动元素之后剩余的空间。所以你应该改变display用于输入的属性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/ http://jsfiddle.net/naeemshaikh27/MHeqG/1522/使用计算器。