50%的内联块不会彼此相邻显示

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

检查这个小提琴.http://jsfiddle.net/YpTMh/9/

有关更多选项,请参阅http://css-tricks.com/fighting-the-space-between-inline-block-elements/

Answer 2

实际问题是两个元素之间的空格(换行符).因为它是一个内联块元素,它会记录空间,所以它占空间的50%.

一些可能性:

<span class='left'>Left</span><!--
--><span class='right'>Right</span>

要么 <span class='left'>Left</span><span class='right'>Right</span>

要么

<span class='left'>Left</span><span
class='right'>Right</span>

或者对我而言,它可能最有意义 float: left;并将其更改为display: block元素.我相信内联元素的本质是以与带有一些额外空间信息的文本相同的方式操作,所以为什么在没有理由的时候变得很难？

Answer 3

css3中的好答案是:

white-space: nowrap;

在父节点中,和:

white-space: normal;
vertical-align: top;

在div(或其他)50%

例如:http://jsfiddle.net/YpTMh/19/