0

请看看这个：http: //jsfiddle.net/MbrJf/

当我使用检查元素时，正文从页面顶部开始 100px，即使在 css 中没有边距或类似的东西。如果<nav>元素从页面中删除，一切正常（即使margin-top规则从 css 中删除，它也可以正常工作 - 但仍有一点差距）。

nav 不应该一直在顶部，但是当添加 margin-top 时，它会将 h1、地址和站点的其余部分推到它下面……这非常令人困惑。我正在努力做到这一点：http: //imgur.com/zgBFm

有人能理解这个吗？

HTML：

<div id="wrapper">
  <header>
    <h1><a href="index.html" title="Ozio Sushi">Ozio Sushi</a></h1>
    <address>
    123.456.7890<br>
    123 Fake Street West, Toronto
    </address>
    <nav>
      <ul>
        <li><a href="about.html" title="About">About</a> </li>
        <li> <a href="menu.html" title="Menu">Menu</a></li>
        <li> <a href="gallery.html" title="Gallery">Gallery</a></li>
        <li> <a href="contact.html" title="Contact">Contact</a></li>
      </ul>
    </nav>
  </header>
</div>

CSS：

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


body { 
margin: 0px;
padding: 0px;
background-color: #362f2d;
}
a {
    text-decoration: none;
    color:inherit;
    border: none;
}
#wrapper {
    background-color: #362f2d;
    width: 100%;
    margin: 0px;
    padding: 0px;
    top: 0px;
    left: 0px;
}
header {
    clear: both;
    width: 100%;
    display: block;
}
nav { 
height: 50px;
width: 100%;
background-color: #f7941d;
margin-top: 100px;
}
header h1 {
    font-family: Kaushan script, cursive;
    color: white;
    float:left;
    font-size: 60pt;
    font-weight: 300;
    margin:0px;
}
address {
    font-family: Lato, Arial, sans-serif;
    color: white;
    font-weight:300;
    font-size: 8pt;
    float:left;
    font-style: normal;
}

li {
display: inline;
margin-right: 60px;
font-family: Lato, Arial, sans-serif;
color: white;
font-size: 16pt;
font-weight: 400;
}
#main {
    clear:both;
    margin:0px;
}


​

​</p>

4

1 回答 1

1

将导航中的margin-toponnav和 the设置为：ul0

http://jsfiddle.net/MbrJf/3/

边距将主体向下推，并且ul具有必须取消的默认边距（您应该使用重置或规范化 CSS 文件）

编辑

那么你想要这样的东西：http: //jsfiddle.net/MbrJf/4/？这种情况下的根本问题是edheader没有正确包含徽标。应用其中一种标准解决方案，如 clearfix 或将解决这个问题。h1floatoverflow:hidden

于 2012-10-28T16:24:43.173 回答