html - 创建一个标签框，如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

看看这个链接：选择和令牌输入。我在论坛上找到了两个：jQuery plugin for a simple input box for comma-separated tags with autosuggest

Answer 2

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

这确实会改变标签的顺序。但是，既然它们就是这样，我猜顺序并不重要。