1

我的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 元素。

4

6 回答 6

2

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

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

于 2012-10-05T13:58:53.007 回答
1

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

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

您可以添加overflow: hidden到标题以使其包含其子项：

#header {
    width:900px;
    border:dashed 1px;
    margin:5px;
    padding:2px;
    overflow: hidden; }
于 2012-10-05T13:58:45.913 回答
0

你float在你的h1标签中使用它来解除你的文本的绑定h1。如果有必要使用float，请使用:after选择器。

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

#header .fl_left h1
{
  content:".";
  visibility:hidden;
  clear:both;
}
于 2012-10-05T14:00:05.677 回答
0

删除fl_leftdiv 和 class，然后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

于 2012-10-05T14:02:20.160 回答
0

我建议如下：

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-05T14:08:38.237 回答
0

这就是我所做的： -

  • 标题及其父 div 向左浮动，浮动 div 就足够了
  • 浮动元素不占用空间，这就是为什么标题文本出现在带有边框的 div 之外的原因
  • 此外，修复了拼写错误并改进了格式

要查看此操作，请参阅此JSFiddle。


HTML 代码

资料来源： A List Apart 的文章

<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 参考

#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-05T14:35:05.037 回答