html - 标题和导航栏 - css 问题(差距)

Question

我在制作 <h1> 时遇到了问题我页面的标题链接展开以填满整个 <header>在我的网页中标记。下面似乎有一个缺口，我不知道如何修复它。

我的导航栏也有类似的问题，随着我增加浏览器的大小，它不断扩展。

尝试将鼠标悬停在这个 JSFiddle 中的标题和导航栏上，看看我的意思:http://jsfiddle.net/8qLkc/

谁能帮我解决这个问题。

Answer 1

只需使用非常简单的 CSS 代码:

header h1 {
    height:100%;
}

这扩展了 <h1>到其父级的全高，即 <header>在这种情况下。

Demo

要解决调整窗口大小时导航折叠的问题，请使用:

nav {
    white-space:nowrap;
}
#mainContent {
    clear:both;
}

Demo

这可以防止导航链接在文本超出其容器宽度时折叠，并确保主要内容在显示 float 元素之前获得空间。