Tag-it 自动完成：使 li.tagit-new 覆盖 ul.tagit 的其余部分答案

【问题标题】：Tag-it Autocomplete: Make li.tagit-new cover rest of ul.tagitTag-it 自动完成：使 li.tagit-new 覆盖 ul.tagit 的其余部分
【发布时间】：2017-04-01 11:17:10
【问题描述】：

我试图让“li.tagit-new 输入”覆盖父级 ul.tagit 其余部分的整个宽度：

ul.tagit li {
    display:table-cell;
    white-space:nowrap;
    vertical-align:top;
    float: none;
}

ul.tagit li.tagit-new {
    width: 100%;
    border: 1px solid #ddd;
}
ul.tagit li.tagit-new input {
    width: 100%;
}

如果至少有一个标签，它就可以正常工作。但如果没有标签则不是：

http://jsfiddle.net/bus9dgx5/

【问题讨论】：

标签： jquery css autocomplete tag-it

【解决方案1】：

我不能把它写成评论。据我了解您的问题，您可以使用 flex 属性显示它

ul.tagit {
  margin-bottom: 0px;
  display: flex;
}

这是一个演示

http://jsfiddle.net/4eusrdbf/1/

【讨论】：

但是如果没有标签...输入仍然没有覆盖整个宽度。我在输入的最右侧有一个 .ui-autocomplete-loading ... 如果没有标签 ...它在中间的某个地方 ...
输入没有覆盖整个宽度，它只是给人一种错觉，因为我们没有看到边界，如果没有边界，最右边的 ui-autocomplete-loading 将始终在右边标签也是，你可以在 jsfiddle 上看到这个。如果我不明白你的问题，你可以发一张照片吗？
由于某种原因 .ui-autocomplete-loading 没有出现在 jsfiddle 中，所以我将它附加到 .ui-autocomplete-input ：jsfiddle.net/4eusrdbf 当没有标签时它在中间的某个地方.. . 所以这就是为什么我希望输入覆盖整个宽度...
嗨 Philipp，这是更新后的 Jsfiddle，我使用 flex 属性修复了它jsfiddle.net/4eusrdbf/1，如果这解决了您的问题，请告诉我编辑可以将其标记为绿色的回复，谢谢 :)
是的，完美。这就是我所希望的。 :-) 非常感谢。