6

私が持っていると言う

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

と

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

2 つのスパンが並べて表示されることを期待していますが、そうではありません。マージン、パディング、ボーダーがないのに、何が問題なのですか?

4

4 に答える 4

15

親要素の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-before-inline-block-elements/を参照してください。

于 2012-12-12T02:50:28.577 に答える
10

実際の問題は、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インライン要素の性質は、追加の空間情報を含むテキストと同じように動作することだと私は信じています。

于 2012-12-12T02:25:44.060 に答える
5

css3 の良い答えは次のとおりです。

white-space: nowrap;

親ノードで、および:

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

div (またはその他) で 50%

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

于 2015-02-03T19:14:04.900 に答える
0

これが役立つことを願っています

    <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 を使用し、その幅と表示プロパティをブロックに設定しています。子ブロックでは、表示プロパティを inline-block に設定できます。さらにスパンを追加したい場合は、スパン ブロックの幅を 100/(no: of blocks) -1 減らすことで追加できます。float プロパティを使用して結果を取得することもできます。

于 2012-12-12T02:47:33.997 に答える