HTML代码

Question

我的css代码：

#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>

我得到输出'hello all'在标题之外。我的目的是将h1元素文本放在头文件中。

为什么标头ID规则未应用于我的h1元素。

Answer 1

您需要将overflow: hidden;添加到#header样式声明中。

此外，考虑到其父<h1>已经浮动，.fl_left元素是否真的需要浮动？如果是，那么.fl_left也需要overflow: hidden;。

Answer 2

#header选择器仅适用于标题元素iself，而不适用于其子元素，并且样式中没有任何内容可以由子元素继承。

文本在标题之外结束的原因是标题只包含不占用空间的浮动元素，因此它们不会影响标题的高度。

您可以在标头中添加overflow: hidden以使其包含子代：

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

Answer 3

您在float标记中使用的是h1，而h1标记了float中的文字。如果有必要使用#header .fl_left h1 { content:"."; visibility:hidden; clear:both; }，请使用:after选择器。

将此代码添加到您的CSS文件中（在添加之前通过以上链接）

{{1}}

Answer 4

删除fl_left div和类，然后将float: left从h1移至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

Answer 5

我建议如下：

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框中添加内容。

Answer 6

这就是我所做的： -

标题以及它的父div都向左浮动，浮动div就足够了
浮动元素不占用空间，这就是标题文本出现在带有边框的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;，因此spacer 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;样式导致任何一方都没有浮动项目，因此它们围绕标题，而不是仅仅低于它们。

css id未应用于内部元素

6 个答案:

HTML代码

CSS代码