javascript - 如何使 div 填充剩余空间，并在必要时转到下一行？

Question

这是迄今为止我所拥有的演示示例：

演示链接

这是我现在使用的 CSS：

body {
    background-color: darkgrey;    
}

.container {
    background: #ccc;
    max-width: 300px;
    overflow: hidden;
}
.label {
    float: left;
}
.filler {
    overflow: hidden;
    display: block;
}
.filler input {
    min-width: 150px;
    width: 100%;
    border: none;
}

我想要完成的是一种将标签（几乎与 stackoverflow 上的标签系统完全一样）添加到 div 的响应方式，同时让输入始终位于最后输入的标签 div 之后。到目前为止，我已经完成了这一点，除了最后一个标签被推到下一行。

我真的很喜欢非 javascript 解决方案，但如果有人有优雅的 javascript 解决方案，我愿意接受！

Answer 1

尝试这个：

.label {
    display: inline-block;
}

这是小提琴：http: //jsfiddle.net/vGWCR/

Answer 2

这有什么用吗？我不是 javascript 专家，也没有测试过它，但它看起来很简单。听起来您所需要的只是一种让退格键减去宽度的方法。

创建一个具有自动扩展宽度的文本框？

Answer 3

使用display: inline-block代替float: left：

CSS

.label {
    display: inline-block;
}
.filler {
    overflow: hidden;
    display: inline-block;
}

演示

Answer 4

我知道这不是代码解决方案，但也许现有的插件可以提供帮助。例如：jQuery 标签输入插件？我敢肯定还有其他人，但也许可以重用，除非您的用例有很大不同？

（我会添加评论，但我的代表还不够高:)）