0

これを見てください：http：//jsfiddle.net/MbrJf/

inspect要素を使用すると、cssにマージンなどがない場合でも、本文はページの上部から100pxで始まります。<nav>要素がページから削除されると、すべてが正常に機能します（ margin-topcssからルールが削除されても、問題なく機能しますが、まだ少しギャップがあります）。

ナビゲーションは一番上にあるべきではありませんが、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-topに設定します。navul0

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

余白は本体を押し下げ、ulデフォルトの余白があり、キャンセルする必要があります（CSSファイルのリセットまたは正規化を使用する必要があります）

編集

次に、次のようなものが必要になります：http: //jsfiddle.net/MbrJf/4/？その場合の根本的な問題は、編集時headerにロゴが適切に含まh1れていないことです。floatclearfixのような標準ソリューションの1つを適用するか、overflow:hiddenそれを処理します。

于 2012-10-28T16:24:43.173 に答える