我尝试设计标签管理控件。我将 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 大师!
UPD:小提琴