我的CSS代碼：CSS ID不應用於內部元素

#header 
{ 
width:900px; 
border:dashed 1px; 
margin:5px; 
padding:2px; 
} 
#header .fl_left 
{ 
float:left; 
display:block; 
width:260px; 
} 
#header .fl_left h1 
{ 
float:left; 
background-color:#666633; 
color:#0033CC; 
font-family:Verdana, Arial, Helvetica, sans-serif; 
font-style:oblique; 
}

我的html代碼：

<body> 
<div id="header"><div class="fl_left"> <h1>hello all</h1> </div></div> 
</body> 
</html>

我得到的輸出 '你好所有' 外頭。我的意圖是將h1元素文本放在標題中。

爲什麼標題ID規則不適用於我的h1元素。

來源

2012-10-05 crazyvi

你的代碼的目標是什麼？你想讓你的'h1'標題浮在標題框中嗎？你也可以在不同的位置聲明兩次屬性。所以請詳細解釋一下。 – tvandenbrande

#header選擇器僅適用於頭元素iself，而不適用於子元素，樣式中沒有任何內容可以由子元素繼承。

文本在標題外部結束的原因是標題只包含不佔用空間的浮動元素，所以它們不會影響標題的高度。

您可以添加overflow: hidden到頭部，使其包含其子：

#header { 
    width:900px; 
    border:dashed 1px; 
    margin:5px; 
    padding:2px; 
    overflow: hidden; }

來源

2012-10-05 13:58:45 Guffa

我已經移除了float：離開了我的#header .fl_left h1。現在我已經放置了我的float：只留在我的fl_left類中。我試圖用overflow：隱藏在#header中，但它不起作用 – crazyvi

@crazyvi：那麼你的代碼中可能還有其他的東西讓ir不能工作。在這裏，我把你的代碼，並添加'溢出'：http://jsfiddle.net/Guffa/jkXFU/ – Guffa

謝謝..它的工作原理 – crazyvi

您需要添加overflow: hidden;您#header樣式聲明。

此外，<h1>元素是否真的需要浮動左邊考慮其父母.fl_left已經浮動？如果是這樣，那麼.fl_left也需要overflow: hidden;。

來源

2012-10-05 13:58:53 boz

我已經刪除了浮法：離開我的#header .fl_left h1。現在我已經放置了我的float：只留在我的fl_left類中。我試着用overflow：隱藏在#header中，但它不起作用。 – crazyvi

它似乎爲我工作 - http://jsfiddle.net/nr4ZY/。我誤解了一些東西嗎？ – boz

您在您的h1標記中使用float標記，該標記將文本從h1中解除綁定。如果需要使用float，則使用:after選擇器。

將此代碼添加到您的CSS文件（之前添加經過上面的鏈接）

#header .fl_left h1 
{ 
    content:"."; 
    visibility:hidden; 
    clear:both; 
}

來源

2012-10-05 14:00:05

取出fl_left的div和類，然後從H1移動float: left到div的#header

HTML：

<div id="header"><h1>hello all</h1></div>

CSS：

#header 
{ 
float: left; 
width:900px; 
border:dashed 1px; 
margin:5px; 
padding:2px; 
} 
#header h1 
{ 
background-color:#666633; 
color:#0033CC; 
font-family:Verdana, Arial, Helvetica, sans-serif; 
font-style:oblique; 
}

結果：jsFiddle

來源

2012-10-05 14:02:20 Wilq

我建議如下：

CSS：

#header{width:900px; border:dashed 1px; margin:5px; padding:2px;} 
#headerTitle{float:left; background-color:#666633; width:260px; } 
#headerTitle h1{color:#0033CC; font-family:Verdana, Arial, Helvetica, sans-serif; font-style:oblique;}

HTML：

<div id="header"> 
    <div id="headerTitle> 
     <h1>hello all</h1> 
    </div> 
</div>

這將導致在乾淨的代碼。你有一個標題div，標題div在這個標題div中浮動。這樣，您仍然可以在右側的標題div內添加其他內容（確保在此之後清除），並且如果需要，您可以在headerTitle框中添加內容。

來源

2012-10-05 14:08:38 tvandenbrande

您的代碼很有幫助。謝謝。 – crazyvi

這裏就是我所做的： -

頭以及它的父格向左浮動，浮動的div足夠
浮動元素不佔空間，這就是爲什麼頭文字出現帶有邊框
還，固定錯別字股利外和改進格式化

要看到這個動作，看到這個JSFiddle。

HTML代碼

來源：A List Apart's article

<div id="header"> 
    <div class="spacer"> 
     &nbsp; 
    </div> 

    <div id="header-title"> 
     <h1>hello all</h1> 
    </div> 

    <div class="spacer"> 
     &nbsp; 
    </div> 
</div>

我們增加nbsp;因此間隔的div不爲空。

CSS代碼

文檔：W3Schools CSS Reference

#header { 
    width:900px; 
    margin:5px; 
    padding:2px; 

    border:dashed 1px; } 

#header #header-title { 
    float:left; 
    display:block; 
    width:260px; } 

#header #header-title h1 { 
    float:left; 

    background-color:#666633; 
    color:#0033CC; 

    font-family:Verdana, Arial, Helvetica, sans-serif; 
    font-style:oblique; } 

#header .spacer { 
    clear: both; }

的clear: both;風格不會造成浮動元素出現任何一方，所以他們來各地的標題，而不是在他們的下面。

來源

2012-10-05 14:35:05

CSS ID不應用於內部元素

回答

HTML代碼

CSS代碼

相關問題