<div> with float right inner <li>元素仅适用于一个</li> <li>。为什么？

Question

我有<ul>使用bootstrap类并使用bootstrap类和clearfix动态添加<li>元素

<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);

例如

<li>

的样式

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

div内部<li>的样式

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

我为div添加了类：r-align或l-align使用float

来对齐div <li>

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

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

如果我用l-align添加li然后r-align然后l-align等等那么一切都好。

但是如果我添加两个或更多相同的对齐，浮动不能正常工作。怎么解决？在图像上我有3个div与r-align因此。

Answer 1

有人提示我尝试边距或填充。当我将li上的填充更改为非零时，浮动变得正常工作。