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/

Answer 4

希望这会有所帮助

    <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并将其宽度和显示属性设置为阻止。在子块中，u可以将display属性设置为inline-block，如果你想要添加更多的span，你可以通过减小span块100 /（no：of blocks）-1的宽度来添加。您也可以使用float属性来获得结果。

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

4 个答案: