見出しの幅に背景色を制限する

見出しのテキストに厳密に固執し、ページの幅全体にまたがらないように背景色を取得しようとしています。私は、ブロックレベルの要素がページの幅全体を占めることを理解しています。そのため、インラインスタイルを強制する以外にも、これを回避する方法があるのだろうかと思いました。見出しの幅に背景色を制限する

EDIT： display：inline-blockを使用する場合は、なぜ私はtext-align: center;と指定しても、私のヘッダーはまだ整列されたままになっていますか？代わりにフロートを使うべきですか？おそらく、

2012-03-31 Ashish

テキスト要素に背景色を適用しないのはなぜですか？ – iambriansreed

どうすればいいですか？ – Ashish

@ CatShoesの答えをチェックしてください。 – iambriansreed

このような何か：HTMLで

：CSSで

<div id="Heading"> 
    <span id="HeadingText">HEADING TEXT</span> 
</div>

：

あなたの質問から推測

#Heading 
{ 
    /* Formatting of full heading */ 
} 

#HeadingText 
{ 
    /* Formatting for just heading text */ 
    background-color: #00ff00; 
}

、これはあなたが探している答えではありませんが、それは有用かもしれません。

編集：

また、これもうまくいくはずです。しかし、私は、これはあなたが（？インライン、右を）避けたいものであるかなり確信している...

インラインブロックとして

<h1 style="background-color:#660000; display:inline;">Heading<h1>

2012-03-31 01:38:02 CatShoes

ありがとう！将来の参照のために、インラインブロックを強制するか、divのブロックタグをラップする方が良いでしょうか？ – Ashish

正直言って、それは私が答えることができる質問ではありません。私はベストプラクティスが何であるか正しく分かりません。ごめんなさい。しかし、私はおそらくDIVの代わりにインラインまたはインラインブロックを使用するのが最善だろうと推測します。 – CatShoes

ああ、ありがとう！ – Ashish

または表示するには、ほとんどのユースケースを満たすことができる：

h1 { background-color: red; display: inline-block; }

2012-03-31 01:48:10 Jameson

これは、この問題を解決するだろうと思う：

<div id="Heading"> 
    <div id="HeadingText">HEADING TEXT</div> 
</div>

そして、あなたのCSSは次のようになります。

#Heading{ 
    background-color:#CCC; 
} 
#HeadingText{ 
    display:inline-block; 
    background-color:#FF0000; 
}

2012-03-31 01:52:05 selo

text-align：centerを指定する必要があります。あなたのdivブロックを含む親要素に属性を設定し、ヘッダとその背景をdisplay：inline-blockに合わせます。

2012-03-31 03:52:59 manoj

ありがとう！あなたはそのような理由を知っていますか？ – Ashish

答えて