Html 50%的内联块不相邻显示

说我有

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

---

我预计这两个跨度将并排显示，但它们不会。没有边距、填充或边框，那么问题出在哪里？

实际问题是两个元素之间的空格（换行符）。因为它是一个内联块元素，它注册了空间，所以它是50%+空间

一些可能性：

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

LeftRight

或

LeftRight

或

LeftRight

或者对我来说，

浮动：左

并将其更改为

显示：块

元素。我相信内联元素的本质是以与文本相同的方式操作，并带有一些额外的空间信息，那么，为什么在没有理由的情况下变得不正常呢？

希望这会有所帮助

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

​
       div{
           width:50%;
           display:block;
       }
       .ib-half {
           margin:0;
           display:inline-block;
           width: 49%;
           height:100px;
          }​

​
div{
宽度：50%；
显示：块；
}
.ib一半{
保证金：0；
显示：内联块；
宽度：49%；
高度：100px；
}​

在这里，我使用一个父div，并将其宽度和显示属性设置为block。在子块中，u可以将“显示”特性设置为“内联块”，如果您希望添加更多的跨距，u可以通过减小跨距块的宽度100/（块数）-1来添加。

---

您还可以使用float属性来获得结果。

将父元素的字体大小设置为零可能是一个解决方案

HTML:

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

检查这把小提琴

---

有关更多选项，请参阅css3中的好答案是：

white-space: nowrap;

在父节点中，以及：

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

在部门（或其他部门）中占50%

---

示例：

因为它是一半，所以将它设置为49%根本没有意义！这应该是公认的答案。因为内联块是内联流的一部分，所以它会受到空间的影响。设置字体大小：0有效地使空间宽度为0。

span{
    background:#bdbdbd;
}

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

.parent {
    font-size: 0;
}

white-space: nowrap;

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