我的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代码

相关问题