Html 带内容和不带内容的span标记的工作方式不同

我有html代码：

<ul>
     <li><span class="a">aaa</span><span class="b">bbb</span></li>
     <li><span class="a">aaa</span><span class="b">bbb</span></li>
     <li><span class="a">aaa</span><span class="b">bbb</span></li>
</ul>

如果在两个跨度（

class=“a”

和

class=“b”

）中都写入了一些内容，则可以正常工作

如果从

span class=“b”

中删除文本，则现在的结果不理想

---

请告诉我为什么会发生这种情况？

将

垂直对齐：顶部

添加到两个跨距；这将使它们按预期工作，即使它们都没有内容

这对我来说很好：

---

试着把

float:left放进去编码到跨度类别a中

添加以下内容后，我尝试了不同的情况：

.a {
....
float:left;
....
}

它运行良好，特别是在
ul{…
中将边距和填充设置为0时。
我知道还有其他的解决方案，但我认为这是最小的可能

.a {
    width: 100px;
    height: 60px;
    float: left;
    clear: both;
    background-color: #900;
}

.b {
    width: 100px;
    height: 60px;
    background-color: #009;
    display: block;
    float: left;
}

.a {
....
float:left;
....
}