0

私はこのHTMLの断片を持っています：

<div style="display: inline-block; width: 20px; height: 20px; background-color: silver">
    <span style="display: inline-block; background-color: red; width: 10px; height: 20px;"></span>
    <span style="display: inline-block; background-color: green; width: 10px; height: 20px; "></span>
</div>

私の目標は、外側<div>を2つのスパンで並べてカバーすることですが、代わりに、1つのスパンが別のスパンの上にあります。

赤いスパンが左側にあり、右側のスパンが右側にあるようにするにはどうすればよいですか？（注：2つ以上の内部SPANをサポートするソリューションが必要です）。

4

4 に答える 4

2

スパンがinline-blockであるため、それらの間の空白はスペースとして表示され、divの幅がその余分なスペースを考慮していないため、1つが下にプッシュされます。コメントを付けてスパン間の空白を削除してみてください（または同じ行に配置してください）。

<div style="display: inline-block; width: 20px; height: 20px; background-color: silver">
    <span style="..."></span><!--
    --><span style="..."></span>
</div>

また、インラインCSSを使用せずに、スタイルシートを使用して要素のスタイルを設定することをお勧めします。これにより、コードが読みやすくなります。

于 2012-09-12T15:47:03.260 に答える
2

あなたがスパンを浮かせるならば、それらは並んで行きます。ここに例があります。

   <div style=" width: 20px; height: 20px; background-color: silver">
        <span style="display: inline-block; float:left;background-color: red; width: 10px; height: 20px;"></span>
        <span style="display: inline-block; float:left;background-color: green; width: 10px; height: 20px; "></span>
    </div>
于 2012-09-12T15:47:07.873 に答える
0

ウィリアムはあなたの問題の彼の評価において正しいです。font-size: 0親要素（あなたの場合はそれを囲むdiv）に 追加すると、うまくいくことがわかりました。

于 2012-09-12T15:53:00.973 に答える
0

スクラップコラが言ったように、それは内側の要素を浮かせることによって修正することができますが、あなたが浮かぶときはいつでも、それがこのようになることができるように明確でなければなりません：-

<div style=" width: 20px; height: 20px; background-color: silver">
        <span style="display: inline-block; float:left;background-color: red; width: 10px; height: 20px;"></span>
        <span style="display: inline-block; float:left;background-color: green; width: 10px; height: 20px; "></span>
        <div style="clear: both;"></div>
    </div>

ここで、追加のdivは、フロートされた要素をクリアするための疑似要素です。

別のメソッドは、親divでclearfixクラスを使用しています

clearfiクラスのcssは

.clearfix:after {clear:both;content:".";display:block;height:0;visibility:hidden;}

コードは次のようになります。-

<div class="clearfix" style=" width: 20px; height: 20px; background-color: silver">
            <span style="display: inline-block; float:left;background-color: red; width: 10px; height: 20px;"></span>
            <span style="display: inline-block; float:left;background-color: green; width: 10px; height: 20px; "></span>
        </div>
于 2012-09-12T17:03:36.940 に答える