Question

主要思想是在整个网站上都有一个特定于颜色的菜单。为了做到这一点，我为6个主页中的每一个制作了不同的风格。在每个主页上都有一个子菜单。

这就是我想要的样子：

what i want - image

这就是它的样子：

what it looks like - image

正如您所看到的，我很难将子菜单设置到位。似乎它与主菜单之间存在一些奇怪的差距。我在* css的开头放置了* margin / padding / border 0规则，所以我仍然处于亏损状态。

HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>DDS / Om skolen</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<!--BODY-->
<body>
    <!--WRAPPER-->
  <div id="wrapper">
        <!--HEADER-->
        <div id="header">
          <div id="headlogo">
          <h1>Den Demokratiske Skole</h1>
          </div>
        </div>
        <!--MENUER-->
<div id="menu">
            <!--NAV ABC-->
            <div id="navbara">
            </div>
      <!--NAV ZXY-->
      <div id="navbary">
      </div>
<ul id="nav">
                <!--INBOUND-->
                <li><a href="#">OM SKOLEN</a></li>
                <li><a href="#">OPTAGELSE</a></li>
                <li><a href="#">KONTAKT</a></li>
                <li><a href="#">MERE INFO</a></li>
                <!--OUTBOUND-->
                <li><a href="#">FOREDRAG</a></li>
                <li><a href="#">PRESSE</a></li>
            </ul>
        </div>
        <div id="navmarka">
        </div>
        <div id="subnav">
            <ul>
                <li><a href="#">SKOLEN</a></li>
                <li><a href="#">VÆRDIER</a></li>
                <li><a href="#">ANSATTE</a></li>
                <li><a href="#">BESTYRELSEN</a></li>
                <li><a href="#">VENNEKREDS</a></li>
                <li><a href="#">INTRANET</a></li>
            </ul>
        </div>
        <!--CONTENT-->
        <div id="content">
        </div>
        <div id="footer">
        </div>  
    </div>
</body>
</html>

CSS：

@charset "UTF-8";
/*OVERALLS*/
* {
    margin: 0px;
    border: 0px;
    padding: 0 px;
}
h1 {
    font-size: 10px;
    text-indent: -99999px;
}
/*SINGLES*/
#wrapper {
    margin-right: auto;
    margin-left: auto;
    width: 780px;
    margin-top: 20px;
    height: auto;
}
#header {
    width: 780px;
    height: 84px;
    float: left;
    margin-bottom: 10px;
}
#headlogo {
    background-image: url(../images/headerlogo.png);
    height: 84px;
    width: 215px;
    float: left;
}
#menu {
    height: 30px;
    width: 780px;
    float: left;
}
#bars {
    float: left;
    height: 10px;
}
/*navbarABC*/
#navbara {
    height: 10px;
    width: 381px;
    float: left;
    margin-right: 26px;
    background-color: #3FA9F5;
}
#navbarb {
    height: 10px;
    width: 380px;
    float: left;
    margin-right: 26px;
    background-color: #3CF;
}
#navbarc {
    height: 10px;
    width: 380px;
    float: left;
    margin-right: 26px;
    background-color: #3CF;
}
#navbard {
    height: 10px;
    width: 380px;
    float: left;
    margin-right: 26px;
    background-color: #3CF;
}   
#navbare {
    height: 10px;
    width: 380px;
    float: left;
    margin-right: 26px;
    background-color: #3CF;
}
/*navbarZXY*/
#navbarz {
    height: 10px;
    width: 154px;
    float: left;
    background-color: #3CF;
}
#navbarx {
    height: 10px;
    width: 154px;
    float: left;
    background-color: #3CF;
}
#navbary {
    height: 10px;
    width: 154px;
    float: left;
    background-color: #000;
}
#nav {
    float:left;
    padding: 0px;
    width: 780px;
    font-size: 14px;
    font-weight: 100;
    height: 10px;
    margin-top: 5px;
}
#nav ul{
    list-style-type:none;
}
#nav li{
    display:inline;
    margin-right: 21px;
}
#nav li a{
    text-decoration: none;
    font-family: Helvetica;
    color: #000;
}
#navmarka {
    height: 1px;
    width: 83px;
    background-color: #3FA9F5;
    float: left;
    margin-right: 697px;
}
/*subnav*/
#subnav {
    float:left;
    width: 200px;
    font-size: 12px;
    height: 100px;
    margin-top: 20px;
    border-left-width: 1px;
    border-left-style: solid;
    border-left-color: #3CF;
}
#subnav ul{
    list-style-type:none;
}
#subnav li a{
    padding: 0px;
}
#subnav li a{
    text-decoration: none;
    font-family: Helvetica;
    color: #000;
}
#footer {
    clear: both;
    height: 20px;
    width: 780px;
}

Answer 1

这是因为你margin-top。请尝试margin-top:10px或5px以满足您的需求。

Answer 2

删除margin-top:20px中的#subnav。它会覆盖margin:0px。

Answer 3

您的<div id="subnav">...</div>设置了margin-top: 20px; 除去那个，差距就消失了。

EDIT; 只是在您的图片上注意到您在顶行和子导航之间也存在差距，您可以通过添加padding-top: 20px;来实现此目的

我的div标签不合适

3 个答案: