Question

我正在尝试获取标题内的导航栏，但它只保留在它下面。我怎样才能解决这个问题？导航div位于<header>内，因此我不确定为什么整个导航栏都设置在标题下方。

以下是JSFIDDLE链接。

HTML代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>FMHS Choral Dept.</title>
<link href="css/mainstyle.css" rel="stylesheet" type="text/css">
<link rel="icon" type="text/css" href="img/favicon.png" />
<link href='http://fonts.googleapis.com/css?family=Roboto:700' rel='stylesheet' type='text/css'>
</head>

<body>
<header><span><a href="#">FMHS Choral Department</a></span></p>
<div class="nav_wrap">
<div class="nav_items">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Calender</li>
<li>News</li>
<li>Awards/Honors</li>
<li>Documents</li>
<li>Links</li>
</ul>
</div><!--end of nav_items-->
</div><!--end of nav_wrap-->
</header><!--end of header-->
<div class="container">


</div><!--end of container-->
</body>
</html>

CSS代码

@charset "utf-8";
/* CSS Document */

body {
    background-image:url(../img/crossword_green.png);
    margin:0;
}

/* HEADER */

header {
    font-family: Roboto;
    width:100%;
    height:50px;    
    font-size:24px;
    background:#FFF;
    text-align:left;
    box-shadow: 1px 5px 5px rgba(0, 0, 0, 0.5);
    position:fixed;
    top:0;
    line-height:50px;
}


header span {
    margin-left:20px;   
}

header span a {
    text-decoration:none;
    color:#000; 
}

.nav_wrap {
    width:800px;
    float:right;
    background:#f0f;    
}

.nav_items ul li {
    display:inline-block;
    list-style-type:none;
    float:right;    
}

/* CONTAINER */

.container {
    width:900px;
    height:800px;   
    border-radius:5px;
    background:#fff;
    margin:auto;
    margin-top:70px;
}

Answer 1

http://jsbin.com/lufik/1/edit

首先，您需要使用一些CSS重置，我使用 Global 一个：

*{margin:0; padding:0;}

比你不需要将身高设置为header
...除非您想用“移动”图标替换菜单。

header {
  font-family: Roboto;
  width:100%;
  /*height:50px;*/       /* nope */

你的导航包装器不需要宽度，你已经将它漂浮在右边：

.nav_wrap {
    /*width:800px;*/    /* njaaah */
    float:right;
}

你不需要漂浮你的LI元素：

.nav_items ul li {
    display:inline-block;
    list-style-type:none;
    /*float:right;*/    /* nöööu */
}

P.S：我真的会将@media规则应用于精美的导航标签图标！

如何将导航栏放入标题？

1 个答案: