web-dev-qa-db-ja.com

ヘッダーの幅（H1、H2など）

ヘッダー（h1からh6）に背景色（ページの背景とは異なる色）を設定し、この背景の幅をヘッダーのテキストの幅と同じにし、パディングを追加します（Notヘッダーが含まれているコンテナーの幅。これが現在行われていることです）。

これはかなり単純なので（またはいずれにせよ！）、コードを表示してもあまり意味がありません。コンテナは固定幅です。現在、h1、h2、h3などのタグに設定されているマージン、パディング、背景色、およびフォントスタイルの設定があります。

編集：コードが役立つと思います！ https://web.archive.org/web/20090724165158/http://adriantrimble.com/headers （これはGeraldのソリューションが適用されていますが、明らかにIE6/7ではまだ機能せず、それでもまだ新しいブラウザでは問題があります）。 display：inlineを使用すると、解決するよりも多くの問題が発生します。前述のようにfloat：leftおよびclear：leftを使用すると、2列のレイアウトのために問題が発生します。これまで皆さんの助けに感謝します。

cssheaderwidth
21
Adrian Trimble

私は使うだろう

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

コメントの後に編集

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

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

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

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

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

45
Gerald Senarclens de Grancy

ヘッダータグ（h1-h6）はブロックレベルの要素であり、したがって、それが入っているコンテナーの幅を埋めます。

display:inline

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

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

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

4
Gabriel Hurley

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

別の方法-それほどきれいではない-は、見出しのテキストの周囲にスパンを追加し、そのスパンに背景色を与えることです。

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

h1 span { background-color:#369; }
4
knittl

hxh1、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>
3
Sébastien Gicquel

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

例：

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

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

1
jasonc65