Html <；部门>；带右内浮动<；李>；元素仅与一个<；李>；。为什么？

我有带引导类的

，并用引导类和clearfix动态添加

元素

<ul class="list-group messages" id="messages">
</ul>


var li = $("<li></li>").addClass("list-group-item clearfix");
var div = $("<div></div>").addClass(align + "-align word").text(word);
div.appendTo(li);
$("#messages").prepend(li);

div内部的样式

.messages > li {
    border: none;
    padding: 0;
}

.word {
    padding: 7px 37px;
    margin: 8px 15px;
    border-radius: 5px;
    font-size: 18px;
}

我为div添加了类：r-align或l-align以使用float对齐div内部

.r-align {
    background-color: #c7eafc;
    color: #45829b;
    float: right;
}

.l-align {
    background-color: #ffe6cb;
    color: #c48843;
    float: left;
}

如果我把li加上l-align，然后r-align，然后l-align，依此类推，那么一切都可以

但是，如果我添加两个或多个具有相同对齐的对象，则float不能正常工作。如何修复它？在图像上，我有3个div，其中r-align是必然的

---

有人提示我尝试边距或填充。当我把li上的填充改为非零时，float就变成了work right