Question

我有三个div正在使用： main ，这是另外两个的容器，标题，目前只包含一个图片，和导航，它有一些链接。现在我无法将导航div直接放在标题div下面，它们之间总是有一行主div。关于如何做到这一点的任何建议？

HTML：

<html>
<head>
   <link rel="stylesheet" type="text/css" href="style.css" />
   <title></title>
</head>

<body>
   <div class="main">

      <div class="header">
         <img src="images/logo.jpg" />
      </div>

      <div class="navigation"><ul id = "linkbar">
         <li><a href="">Home</a></li>
         <li><a href="">Guestbook</a></li>
         <li><a href="">Contact</a></li>
         <li><a href="">Quotes</a></li>
         <li><a href="">Links</a></li></ul>
      </div>
   </div>

</body>

</html>

CSS：

body {
   background-color: gray;

   margin:0px;
   padding:0px;

}

.header {
   background-color:white;
} 

.main {
   background-color: yellow;
   text-align: center;
   width: 900px;
   margin: auto;
}
   a:link {color:white; text-decoration:none;}      /* unvisited link */
   a:visited {color:white; text-decoration:none;}  /* visited link */
   a:hover {color:red; text-decoration:underline;}  /* mouse over link*/
   a:active {color:red; text-decoration:underline;}  /* selected link */

.navigation {
   text-align: center;
   background-color: f8901f;   
}

#linkbar li {
  margin: 0px 20px 0px 20px;
  padding: 11px 0px 10px 0px; 
  list-style-type: none;
  display: inline;
  line-height: 2.5em;
}

Answer 1

没有doctype，您处于'怪癖模式'。将此添加为您的第一行，并查看我们的立场：<!doctype html>

Answer 2

正如@Rob指出的那样，你需要add a doctype作为第一行，例如：

<!DOCTYPE html>

逃避Quirks Mode。

假设这不是唯一的问题，请尝试：

#header img {
    vertical-align: top
}

如果我理解正确，那应该解决这个问题：

总是在主要div的一行他们之间

Answer 3

在您的css中包含以下代码。

ul#linkbar{margin-top:0;}

Answer 4

我似乎发现空间是由图像是内联元素引起的。

尝试添加：

.header img {
    display:block;
}

and ofcourse添加有效的doctype，以便您处于标准模式

CSS - 定位Div

4 个答案: