html - CSS - 使用已设置最小宽度的文本输入填充包含浮动元素的剩余空间

Question

当文本输入将填充其父级中剩余的水平空间时，我需要行为。文本输入必须与浮动元素垂直位于同一位置。它必须尊重自己的最小宽度，所以当available space in parent < min-width of text input, 那么文本输入必须在所有浮动元素下开始并水平填充整个包含块。用css可以吗？

<div style="width:300px;background-color:aqua">
   <div style="float:left;background-color:gray">content</div>
   <input type="text" style="width: ???;min-width:150px" />
</div>

编辑：我需要知道如何设置文本输入的宽度

http://jsfiddle.net/JrDHG/

Answer 1

如果可能，您可以将输入包装到建立新块格式化上下文的块中。它可以是 div 与

overflow: hidden;

（小提琴）

box-sizing:border-box 用于输入也很有用，它有助于输入以默认样式（边框、填充等）适合此块。

Answer 2

边框框是您所追求的。

而且你还需要javascript。

input{
    box-sizing:border-box;
    float:right;
    margin:0;
    padding:0;
}


 document.getElementById('input').setAttribute('style' , 'width:'+
 (document.getElementById('wrapper').offsetWidth - document.getElementById('div').offsetWidth) + 
 'px');

您可以将其概括为多个元素。

小提琴