html - 50% 的行内 block 没有彼此相邻显示

Question

说我有

<span class="ib-half"></span>
<span class="ib-half"></span>

和

.ib-half {
    display: inline-block;
    width: 50%;
}

我希望这两个跨度可以并排显示，但它们不会。没有边距、填充或边框，这是什么问题？

Answer 1

将父元素的font-size 设置为零可能是一种修复方法。

HTML:

<div class = "parent">
    <span class="ib-half">Left</span>
    <span class="ib-half">Right</span>
</div>

CSS:

span{
    background:#bdbdbd;
}

.ib-half {
    display: inline-block;
    width: 50%;
    font-size:10px;
}

.parent {
    font-size: 0;
}

检查这个 fiddle 。 http://jsfiddle.net/YpTMh/9/

更多选项请引用http://css-tricks.com/fighting-the-space-between-inline-block-elements/