問題描述

我希望我的標題(h1 到 h6)具有背景顏色(與頁面背景的顏色不同)，我還希望此背景的寬度與標題中文本的寬度相同，加上填充(不是標題所在容器的寬度，這是現在發生的情況).

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).

我向您展示任何代碼沒有多大意義，因為這相當簡單(或者無論如何都應該如此！).容器是固定寬度.現在我只為 h1、h2、h3 等標簽設置了一些邊距、填充、背景顏色和字體樣式.

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.

我猜代碼會有所幫助！https://web.archive.org/web/20090724165158/http://adriantrimble.com/headers(這已經應用了 Gerald 的解決方案，盡管顯然這在 IE6/7 中仍然無法工作，并且在較新的瀏覽器中仍然存在問題).使用 display:inline 會導致比它解決的問題更多的問題，使用 float: left 和 clear: left 如上所述由于 2 列布局而存在問題.感謝大家到目前為止的幫助.

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.

推薦答案

我會用

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

<小時>

評論后編輯

edit after comment

如果包含的 div 是浮動的，則 clear 不會清除左列.所以將 rightcol 向左浮動并刪除邊距

If the containing div is floated, the clear won't clear the left col. So float rightcol left and remove the margin

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

這篇關于標題寬度(H1、H2 等)的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！