今天想把一个p 对半分成两半的时候，使用下面的代码：
<p class="cell">
<span>a</span>
<span>b</span>
</p>
.cell span{
display:inline-block;
width:50%;
}
发现两个span并不是正好水平对齐，而是每个span单独占用了一行。
当我把代码调整成下面的时候：
<p class="cell">
<span>a</span><span>b</span>
</p>
这个两个span正好各占50%，且在同一行上。
在网上搜索了下原因：
原来是当使用inline-block 的时候，如果两个inline-block元素之间有一个新行，那么在它们之间就会有一个空格。那么50% + 50% + space > 100%; 第二个inline-block就放不下了。
解决办法也有很多种：
1.不换行
<span>a</span><span>b</span>
还是不换行
<span>
</span><span>
</span>
3.通过注释换行
<span></span><!--
--><span></span>
当然还有其他解决办法。
网友评论