确保内联项始终显示在最后

Question

我正在实施HTML消息对话框。

上面显示了收件人输入面板 - 一些收件人，以及最后一个文本框（不可见），用于通过自动完成菜单添加新收件人。

我现在已经实现了它作为内联显示的无序列表：

<ul class="recipients inline clearfix">
    <li class="recipient"><span>recipient 1<a href="#" class="remove">x</a></span></li>
    <li class="recipient"><span>recipient 2<a  href="#" class="remove">x</a></span></li>
    <li class="recipient last"><span>recipient 3<a  href="#" class="remove">x</a></span></li>
    <li class="searchbox"><input type="text" class="search-recipient"></li>
</ul>

ul.inline li {
    display: inline;
    list-style-type: none;
}

问题是，当收件人转到多行时，文本框会向上移动以填充可用空间：

如何使文本框始终显示在收件人之后？

Answer 1

您提供的代码应按预期工作。您可能在输入框上设置了某种浮动。

参见 Live Example