Question

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

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

谢谢！

Answer 1

#body {
    margin-top: 110px;
}

那应该没问题。）

Answer 2

要显示你的栏，你必须设置h1 float：left因为它会推动栏的其余部分

h1{
    float:left;
}

内容需要与标题一样高的边距。见其他文章

Answer 3

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

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

比较两种不同的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;
}

我的导航栏正在翻阅文本，而且导航栏上的链接都没有

3 个答案: