html - with float right inner inner 元素只能与一个 一起使用。为什么？

Question

我有<ul>使用引导类并动态添加 <li>带有引导类和 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);

例如

<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 以对齐 div 内部 <li>使用 float

.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 等等，那么就没问题了。

但是如果我添加两个或更多具有相同的对齐方式， float 将无法正常工作。如何解决？在图像上，我有 3 个 div，结果是 r-align。

Answer 1

有些人提示我尝试使用边距或填充。当我将 li 上的填充更改为非零值时，float 就可以正常工作了。