如何将导航与标题分开答案

【问题标题】：How to separate navigation from header如何将导航与标题分开
【发布时间】：2015-09-14 05:01:53
【问题描述】：

好吧！我为标题写了一个代码，浅蓝色背景颜色宽度为 100%，高度为 450 像素，位于导航标签下方。我也关闭了导航标签。

理想情况下，100% 的蓝色背景标题宽度和 450 像素的高度应该出现在导航和徽标下方，但标题仍将导航置于其中？为什么会这样？See full code here我想把浅色背景拉下来，把上面的nav元素分开。

<div id="brand">Mustaqim Ahmed </div>
<nav>
<ul>
  <li> <a href="#"> Portfolio </a></li>
  <li> <a href="#"> Resume </a></li>
  <li> <a href="#"> Behance </a></li>
  <li> <a href="#"> Contact </a></li>
</ul>
</nav>

<section id="header">

<div id="header">
</div>
#brand
{font-family: Roboto;
 font-size: 30px;
 font-weight: bold;
 line-height: 50px;
 color: #999;
 float: left;
 margin-left: 10px;}




}
#header{

background: lightblue;
width: 100%;
height: 350px;



}

nav { text-align: center; line-height: 50px;  

}

nav ul { float: right;

}

nav li {display: inline; list-style: none;

}

nav a {text-decoration: none; font-family: Helvetica; padding: 10px

}

nav a:hover {

 }

【问题讨论】：

嗨烟雾迷！这有帮助！但是我们为什么要使用这个 css 属性呢？如果要在nav下显示header，并且在nav的故事（div）关闭后将header的代码写在nav下！

标签： html css list navigation

【解决方案1】：

将overflow: hidden; 用于CSS 中的#header：

#brand {
  font-family: Roboto;
  font-size: 30px;
  font-weight: bold;
  line-height: 50px;
  color: #999;
  float: left;
  margin-left: 10px;
}
#header {
  background: lightblue;
  width: 100%;
  height: 350px;
  overflow: hidden;
}
nav {
  text-align: center;
  line-height: 50px;
}
nav ul {
  float: right;
}
nav li {
  display: inline;
  list-style: none;
}
nav a {
  text-decoration: none;
  font-family: Helvetica;
  padding: 10px
}

<div id="brand">Mustaqim Ahmed</div>
<nav>
  <ul>
    <li> <a href="#"> Portfolio </a>

    </li>
    <li> <a href="#"> Resume </a>

    </li>
    <li> <a href="#"> Behance </a>

    </li>
    <li> <a href="#"> Contact </a>

    </li>
  </ul>
</nav>
<section id="header"></section>

【讨论】：