html - span tag with and without content works differently

Question

I have html code:

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

and css:

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}


.a {
    width: 100px;
    height: 60px;
    display: inline-block;
    background-color: #900;
}

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

Works fine if in both spans (class="a" and class="b") are some content writed.

If remove text from span class="b", now result is not desirable

http://jsfiddle.net/hm3sh/1/

Tell please why this happened ?

Answer 1

添加vertical-align: top到两个跨度；即使两者都没有内容，这也应该使它们按需要工作。

http://jsfiddle.net/ExplosionPIlls/hm3sh/2/

Answer 2

尝试放入float:left;span 类

http://jsfiddle.net/hm3sh/7/

Answer 3

这对我来说很好：http: //jsfiddle.net/hm3sh/4/

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

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

Answer 4

添加后我尝试尝试不同的情况：

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

它工作得很好，特别是在边距和填充设置为 0 时ul {...。我知道还有其他解决方案，但我认为这个可能性很小。