16

私は次のレイアウトを持っています

<div style="width:100px">
    <div style="width:50%; display: inline-block;">
        div1
    </div>
    <div style="width:50%; display: inline-block;">
        div2
    </div>
</div>

HTML では、div (div1 と div2) を閉じて開く間に変更行があるため、ブラウザーは改行の代わりに「スペース」文字を追加します。これにより、2 番目の div が最初の div の下に表示されます。

ただし、div1 と div2 の間の \n を削除すると、予想される動作である隣同士に表示されます。

<div style="width:100px">
    <div style="width:50%; display: inline-block;">
        div1
    </div><div style="width:50%; display: inline-block;">
        div2
    </div>
</div>

ただし、これによりコードが見苦しくなります。私は現在使用して<DOCTYPE html>います。XHTML への切り替えも試みましたが、うまくいきませんでした。この改行の動作を排除する方法があると確信しています。何かアイデアはありますか?

参考までに: 改行を削除するために、レンダリング中にフロートを使用したり、php で HTML 出力を解析したりしたくありません。

4

4 に答える 4

8

もう 1 つの方法は、親要素の font-size を 0 に設定してから、子要素の font-size を必要な値に設定することです。お気に入り：

#mybar { font-size: 0; }
#mybar span { font-size: 14px; }

ただし、ブラウザによって font-size = 0 の表示が異なることに注意してください: http://webdesign.about.com/od/fonts/qt/tipfont0.htm

Firefox でテストしたところ、期待どおりに動作しました。私の記憶が正しければ、最小フォントサイズもブラウザによって設定できるので、一貫していない可能性があります。

于 2013-03-08T04:34:31.327 に答える
2

改行を使用するときに HTML 要素間の空白を削除する場合の重複の可能性

float:leftCSS スタイルを使用するか、タグ間のスペースにコメントを付けることができます。

<div style="width:100px">
    <div style="width:50%; display: inline-block;">
        div1
    </div><!--
    --><div style="width:50%; display: inline-block;">
        div2
    </div>
</div>

後で編集font-size:0px;:cssソリューションは、コンテナdivに設定することだと思います:

<div style="width:100px; font-size:0px;">
    <div style="width:50%; display: inline-block; font-size:11px;">
        div1
    </div>
    <div style="width:50%; display: inline-block; font-size:11px;">
        div2
    </div>
</div>

問題を解決する必要があります。

CSSで見られるアンカータグ要素間の不要なスペース

于 2012-10-25T06:51:24.860 に答える
1

これを修正する1つの方法は、「display：inline-block」の代わりに「display：table-cell 」を使用することです。

于 2013-03-08T04:22:37.460 に答える
1

実際に良い解決策は、リストでdivを切り替えることだけだと思います

<ul style="width:100px">
    <li style="width:50%; display: inline-block;">
        div1
    </li>
    <li style="width:50%; display: inline-block;">
        div2
    </li>
</ul>

通常、リストのプロパティを「リセット」すると、div のように見えます。利点は、ブラウザーが<li>アイテム間にスペースを生成しないことです。

于 2012-10-26T07:41:58.440 に答える