Html 备用列表元素随css浮动

我有一个页面，其中列出了使用ajax从数据库加载的消息。 目前，它只是在向下叠加输出

我想从左到右交替列表元素，类似于iOS消息聊天。 有人知道这方面的秘诀吗？我无法理解这一点…

使用第n个子项来设置备用项的样式：

ul li:nth-child(even) {text-align:right;}

---

您可以将它们左右浮动：

ul li:nth-child(even) {float:right;clear:left;}
ul li:nth-child(odd) {float:left;clear:right;}

---

尝试左右浮动？我们需要您的代码HTML/CSS来回答，请详细解释您在这里没有管理的是我的代码和CSS的外观