如何使输入占用行中的所有可用空间

Question

我尝试设计标签管理控件。我在twitter-typeahead中使用jQuery插件tagmanager。我使用了伪输入元素，并将透明输入放入其中。

<div class="tag-collector"> <!-- This div looks like input -->
    <input class="tag-getter" id="gc-input" type="text" name="grantCurrent">
    <!-- this input is transparent -->
</div>

当用户提交某些内容时，标签管理器插件会创建显示提交的标签的跨度。

<div class="tag-collector">
    <!-- this is my submittet tag -->
    <span class="tm-tag" id="MbkVa_1">
        <span>Submited Info</span>
        <a href="#" class="tm-tag-remove" id="MbkVa_Remover_1" tagidtoremove="1">x</a>        
    </span>

    <!-- this is twitter-typeahead wrapper -->
    <span class="twitter-typeahead">
         <!-- a bunch of HTML where contains my REAL INPUT-->
    </span>
    <input type="hidden" name="hidden-telephone" value="Angola"> <!-- input to collect values -->
</div>

现在主要的问题是。我想用我的输入.twitter-typeahead始终填满行中的所有空闲空间。

1)如果我使用width: 100%并输入至少一个高度拉伸的标签。现在，在第一行是标记span，在第二行(所有行)由input填充。

2)如果我使用恒定宽度并输入总宽度大于输入宽度的标签，则输入将向下移动到下一行。现在我有一个填充了一半的行和一个空的行，其中大约50%填充了输入。

帮助我的CSS大师！

更新：Fiddle

Answer 1

您可以使用float:left和overflow: hidden;，如下所示：

http://jsfiddle.net/d2YTf/1/