html - h1 背景の動的幅

Question

私のCSS：

h1 {
    background-color: #f7953d;
    color: #FFF;
    width: 100%;
    padding: 6px 0 6px 10px;
    margin-bottom: 10px;
}

私のHTML

<h1>Hello World</h1>

背景色は常に画面の 100% に引き伸ばされます。h1タグの「World」の後に背景色を停止させ、画面の最後まで行かないようにするにはどうすればよいですか?

Answer 1

H1 はデフォルトでブロック要素であるため、親コンテナーの全幅にまたがり、コンテンツと同じ幅になるようにインライン要素 (スパンのように) にする必要があります。

互換性のニーズに応じて、2 つの可能な解決策があります。

display:inline;

後に効果が得られますが、H1 に続くものはすべて同じ行に表示される可能性があります。

display:inline-block;

それに続くものをH1の下に表示するように強制しながら、後で効果があります。これの唯一の欠点は、IE <8でいくつかの問題を引き起こす可能性があることです。詳細については、 quirksmodeを参照してください

Answer 2

display: inline-block;の CSS に追加することでこれを行うことができます<h1>。これにより、そのコンテンツと同じ幅しか使用せず、それでも を尊重し、指定marginしpaddingます。

Answer 3

私は次のようなことを提案します：

HTML:

 <h1>Hello World</h1>
 <div class="clear"></div>

 <p>Elements after unafected by float</p>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

CSS:

h1 {
    background-color: #f7953d;
    color: #FFF;
    padding: 6px 0 6px 10px;
    margin-bottom: 10px;
    float:left;
}

.clear {
    clear:both;
}

これは一貫して機能します (すべてのブラウザーでサポートされていないインライン ブロックとは異なります)。

パディングが必要なため、要素のインラインはおそらく必要なものではありません。