html - 确保内联项始终出现在最后

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

您提供的代码应该可以正常工作。您可能在输入框上设置了某种 float 。

参见 Live Example