html - コンテンツのあるスパンタグとコンテンツのないスパンタグの動作は異なります

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 {...ます。他にも解決策があることは知っていますが、これは最小限の解決策だと思います。