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

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

查看实时示例