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;放入span class a

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

Answer 4

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

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

效果很好，特别是保证金和填充在ul {...中设置为0。我知道还有其他解决方案，但我认为这个可能性很小。

包含和不包含内容的span标记的工作方式不

4 个答案: