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

我正在鼓励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;
}

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



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

最佳答案

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

见Live Example

关于html - 确保内联项始终出现在最后，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/10623094/