css - Width of Headers (H1, H2 etc)

Question

I want my headers (h1 through h6) to have a background colour (different to that of the page background), I also want the width of this background to be the same as the width of the text in the header, plus padding (Not the width of the container that the header is in, which is what is happening now).

There isn't much point in me showing you any code as this is fairly simple (or it should be anyway!). The container is a fixed width. Right now I have just some margins, padding, background colour and font styling set for the h1, h2, h3 etc tags.

EDIT: I guess code would help! https://web.archive.org/web/20090724165158/http://adriantrimble.com/headers (this has Gerald's solution applied, although obviously this would still not work in IE6/7 and still has problems in newer browsers). Using display:inline causes more problems than it solves, using float: left and clear: left as mentioned has problems because of the 2 column layout. Thanks for everyones help so far.

score 46 · Accepted Answer

h1-h6はブロックレベルの要素であり、コンテナ（または本体のみ）にない場合でも、ウィンドウの幅全体に広がります。1つの解決策は、代わりに表示をインラインブロックに変更することです。

<h1 style="background-color:pink; display:inline-block; padding:1em;">Testheader</h1>

次の要素がpのようなブロックレベルの要素でない場合は、ヘッダーの後に手動でブレークする必要があることに注意してください。

score 17 · Accepted Answer

私は使うだろう

#rightcol h1, #rightcol h2, #rightcol h3, #rightcol h4, #rightcol h6, #rightcol h6 {
   float:left;
   clear:left;
}
#rightcol p {clear:left;}

コメント後に編集

含まれている div がフローティングされている場合、クリアは左の列をクリアしません。したがって、rightcol left をフロートさせ、マージンを削除します

#rightcol {
   float:left;
   padding:70px 20px 20px 0px;
   width:585px;
}

score 6 · Accepted Answer

ヘッダータグ（h1-h6）はブロックレベルの要素であるため、コンテナの幅を埋めます。次のように変更します。

display:inline

背景をテキストの幅だけにします。ただし、これにより他の問題が発生します（インライン要素は、他の多くの点でブロック要素のように動作しないため）。

別の方法は、ヘッダー自体の幅を設定することです。本当にトリッキーになりたい場合は、javascriptを使用してそれを実行し、ヘッダーごとに具体的に計算することができます。

あなたは少し遊んで、あなたの状況で何がうまくいくかを理解する必要があります。

score 4 · Accepted Answer

他の人が言及display:inline-block;したようにオプションですが、すべてのブラウザで機能するとは限りません。私が今考えることができるのは、ヘッダーにafloat:left;とそれに続く要素を与えることですclear:left;

もう 1 つの方法は、きれいではありませんが、見出しのテキストの周りにスパンを追加し、そのスパンに背景色を与えることです。

<h1><span>your text</span></h1>

h1 span { background-color:#369; }

score 3 · Accepted Answer

hx h1、h2、h3などをその中のテキストと同じにしたい場合は、試すことができます

h1 {
    display:table;
}

display: inline-blockやのようなマージンの崩壊を壊しませんfloat: left。

スニペットを参照してください：

#page {
  background-color: #ededed;
  height: 300px;
}
h1 {
  display: table;
  background-color: #10c459;
  padding: 10px;
  font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
}

<div id="page">
  <h1>Hello world</h1>
</div>

score 1 · Accepted Answer

私の解決策は、スパンを h1 内に配置し、代わりにスパンのスタイルを設定することでした。

score 1 · Accepted Answer

(余分な要素や表示プロパティを使用せずに) テキストと同じ幅のヘッダー要素に背景色を追加する別の方法は、CSS の最初の行のセレクターを使用することです。

例：

h1:first-line { 
 background-color: yellow;
}

css - Width of Headers (H1, H2 etc)

7 に答える 7

Related

Reference