1

アイテムとテキストの 2 種類の要素を含むコンテナ アイテムを作成しようとしています。ロジックは次のようになります。

  • 背景は常にインライン表示スタイルで色付けされます (ブロックの代わりに背景の改行を使用)。

  • 1 つのリストに項目を分けます。

私のフィドルを見てください：http://jsfiddle.net/BZw4A/

そして、ここに使用されている階層があります：

<div id="container">
    <div class="text bg">This is only a sample text to show the weird problem about inline text and background.</div>
    <div class="item bg">Item One</div>
    <div class="item bg">Item Two</div>
    <div class="item bg">Item Three</div>
    <div class="item bg">Item Four</div>
    <div class="item bg">Item Five</div>
</div>

フィドルからわかるように、コンテナーの幅の値のために、テキスト要素の背景はインラインではなくブロックのように見えます。私が見つけた唯一の方法は、これらの行を削除することでした:

float: left;
clear: both;

これらの行を削除すると、テキストの背景は希望どおりに戻りますが、ボタンは (インラインのため) 順序が失われ、通常のテキストと同じように同じ行に表示されます。

主にこれらのタイポグラフィの問題に基づいていたこの問題の解決策を聞きたいです。

4

2 に答える 2

1

少しハックですが、:after改行要素を作成するために使用できます。

.bg:after {
    content: '';
    display: block;
}

デモ: http://jsfiddle.net/BZw4A/4/

于 2013-02-05T01:59:28.547 に答える
1

マークアップを変更して、各項目が独自の行 ( <div>s) にあることを示してから、インライン要素内のコンテンツのスタイルを設定できます。

<div id="container">
    <div class="text"><span class="bg">This is only a sample text to show the weird problem about inline text and background.</span></div>
    <div class="item"><span class="bg">Item One</span></div>
    <div class="item"><span class="bg">Item Two</span></div>
    <div class="item"><span class="bg">Item Three</span></div>
    <div class="item"><span class="bg">Item Four</span></div>
    <div class="item"><span class="bg">Item Five</span></div>
</div>

そうすれば、float/clear css はまったく必要ありません。

例: http://jsfiddle.net/BZw4A/3/

于 2013-02-05T02:00:50.687 に答える