有和沒有的內容跨度標籤的工作方式不同

Question

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

和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; 
} 

工作正常，如果在這兩個範圍（class="a"和class="b"）有一些內容所著。

如果從span class="b"刪除文本，現在的結果是不可取的

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

告訴取悅爲什麼會這樣？

Answer 1

將vertical-align: top添加到兩個跨度;這應該使他們按照需要工作，即使兩者都沒有內容。

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

Answer 2

這對我工作得很好： 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 3

嘗試把float:left;到跨度類

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

Answer 4

我嘗試添加後，用不同的情況進行實驗：

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

它工作得很好，特別是與利潤率&邊距設置爲0 ul {...。 我知道還有其他的解決方案，但我認爲這是最小的可能。