html - 50% 的内联块不相邻显示

Question

说我有

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

和

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

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

Answer 1

Setting the font-size of the parent element to zero may be a fix.

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

Check this fiddle. http://jsfiddle.net/YpTMh/9/

For more options please refer to http://css-tricks.com/fighting-the-space-between-inline-block-elements/

Answer 2

实际问题是两个元素之间的空格（换行符）。因为它是一个 inline-block 元素，它注册了空间，所以它是 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元素可能最有意义。我相信内联元素的本质是与带有一些额外空间信息的文本以相同的方式操作，那么为什么在没有理由的情况下变得 hacky 呢？

Answer 3

good answer in css3 is:

white-space: nowrap;

in parent node, and :

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

in div (or other) at 50%

exemple : 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;
          }​

here i am using a parent div and setting its width and display property to block. In the child block u can set the display property to inline-block, and if u want more span to be added the u can add by decreasing the width of the span block 100/(no: of blocks) -1 . You can also use float property to get the result.