我的导航栏正在浏览文本，而 li 甚至不在导航栏上答案

【问题标题】：My nav bar is going over text and the li's aren't even on the nav bar我的导航栏正在浏览文本，而 li 甚至不在导航栏上
【发布时间】：2014-05-24 21:55:44
【问题描述】：

我正在制作一个网页，只是为了好玩，但问题在于导航栏。它要么越过段落文本，要么在其下方。此外，导航链接（主页、关于、资源和联系人）隐藏在导航栏下方。下面是一段代码：

#header {
  width: 100%;
  height: 100px;
  position: fixed;
  top: 0px;
  left: 0px;
  box-shadow: 0px 1px 2px #ccc;
  background-color: #f9f9f9;
  overflow: hidden;
  display: block;
}

#header h1 {
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 100;
  margin-left: 3em;
  color: #50E3C2;
  font-size: 36px;
} 

#header ul {
  float: right;
  margin-top: 0 auto;
  margin-right: 10px;
}

#header ul li {
  display: inline;
  list-style-type: none;
  clear: both;
}

#header li a {
  text-decoration: none;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 100;
  color: #ccc;
  padding-right: 15px;
  float: left;
}

这是小提琴：

http://jsfiddle.net/cY22L/

谢谢！

【问题讨论】：

标签： html css

【解决方案1】：

#body {
    margin-top: 110px;
}

应该没问题:)

【讨论】：

【解决方案2】：

要让你的栏正确显示，你必须设置 h1 floaf:left 因为它会推动栏的其余部分

h1{
    float:left;
}

内容需要与标题一样高的边距。看其他帖子

【讨论】：

【解决方案3】：

我更新了你的 js fiddle，我认为这就是你试图让它工作的方式......看看：

http://jsfiddle.net/cY22L/4/

比较 2 个不同的 CSS 文本以查看更改。这是新的 CSS：

#container {
width: 100%;
}
#header {
width:100%;
position: fixed;
top:0px;
left:0px;
box-shadow: 0px 1px 2px #ccc;
background-color: #f9f9f9;
overflow: hidden;
display: block;
z-index:5;
}
#header h1 {
font-family: Helvetica, Arial, sans-serif;
font-weight: 100;
margin-left: 3em;
color: #50E3C2;
font-size: 36px;
}
#header ul {
float: right;
margin-right: 10px;
}
#header ul li {
display: inline;
list-style-type: none;
clear: both;
}
#header li a {
text-decoration: none;
font-family: Helvetica, Arial, sans-serif;
font-weight: 100;
color: #ccc;
padding-right: 15px;
float: left;
}
p {
font-size: 24px;
}
#body
{
    clear:both;
    position:relative;
    margin-top:150px;
}

【讨论】：