创建一个像stackoverflow一样的标签框

Question

我真的很想知道如何安排一个标签盒，就像我们这里的Stackoverflow一样。

我差不多了，我只需要安排标签，当标签容器宽度被超越时，标签会被推到左边而不是向右或向下。

到目前为止，我有这个CSS代码：

#tagsContainer{
    border: 1px solid black;
    width: 400px;
    height: 28px;
    overflow-x: scroll;
}
#tagsBox{
    float: left;
}
#tagsTxtBox{
    float: right;
}

这个HTML代码：

<div id="tagsContainer">
    <div id="tagsBox"></div>
    <div id="tagTxtBox"><input type="text" id="autocompletes" /></div>
</div>

提前致谢！

Answer 1

查看以下链接：Chosen和Token Input。我在论坛上找到了这两个：jQuery plugin for a simple input box for comma-separated tags with autosuggest

Answer 2

我通过将.tagsBox上的direction设置为rtl（代表“从右到左”）并添加'text-align: left'来解决此问题。文本仍然与框的左边框对齐，但是当它太长并且溢出框时，它会溢出框的左侧。

这确实会改变您的代码的顺序。但是，既然这就是它们，那我的命令并不重要。