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

【问题标题】：How to make an input occupy all available space in row如何使输入占用行中的所有可用空间
【发布时间】：2013-12-05 09:48:42
【问题描述】：

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

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

当用户提交一些东西时，tagmanager 插件会创建显示提交标签的跨度。

<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% 并输入至少一个标签 DIV 拉伸高度。现在第一行是标签跨度，第二行（所有行）由输入填充。

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

帮助我的 CSS 大师！

更新：Fiddle

【问题讨论】：

请考虑为将来的答案提供一个小提琴；）

标签： javascript html css twitter-typeahead

【解决方案1】：

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

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

【讨论】：

新跨度向下移动，但输入始终位于容器的右侧和顶部。我需要输入是容器中的最后一个元素，并且该输入占用了所有可用空间，直到行尾。
这正是它的作用还是我误解了什么？ “跨度向下移动”是什么意思
啊，我想我明白你的意思了。您希望输入占用容器未占用的其余空间吗？当您将其放入容器并将宽度限制为 180 像素时，这将不起作用。容器需要占100%。如果你想要在你的标签周围有一个额外的边框，就像你在小提琴中展示的那样，你需要在你的标签周围有一个额外的 div （那个也是浮动的）。其余的保持不变。