爲什麼這個CSS導航欄不完全在頂部？

這裏的導航欄的代碼：爲什麼這個CSS導航欄不完全在頂部？

#nav { 
    width: 100%; 
    float: left; 
    margin: 0 0 1em 0; 
    padding: 0; 
    background-color: #f2f2f2; 
    border-bottom: 1px solid #ccc; } 
#nav ul { 
    list-style: none; 
    width: 800px; 
    margin: 0 auto; 
    padding: 0; } 
#nav li { 
    float: left; } 
#nav li a { 
    display: block; 
    padding: 8px 15px; 
    text-decoration: none; 
    font-weight: bold; 
    color: #069; 
    border-right: 1px solid #ccc; } 
#nav li:first-child a { 
    border-left: 1px solid #ccc; } 
#nav li a:hover { 
    color: #c00; 
    background-color: #fff; }

按照要求，這裏的導航欄的HTML：

<div id="nav"> 
    <ul> 
     <li><a href="#">About Us</a></li> 
     <li><a href="#">Our Products</a></li> 
     <li><a href="#">FAQs</a></li> 
     <li><a href="#">Contact</a></li> 
     <li><a href="#">Login</a></li> 
    </ul> 
</div>

不應該這樣使它在頂部完全因爲填充是零？我是新來的網頁設計...所有的幫助，不勝感激。

來源

2013-06-21 Aslet

頂部是什麼？沒有你的問題的上下文... –

如果可以的話，粘貼你的HTML。使測試更容易:)。 –

您是否重置了身體邊距？ –

確保你從body和html標籤移除margin和padding：

html, body { margin: 0; padding: 0 }

總是一個好主意，如果你不是已經使用CSS復位。它會照顧你這個。

來源

2013-06-21 15:30:50 ponysmith

重置似乎不是問題，但謝謝。 – Aslet

嘗試在身體保證金復位，否則我們展示測試頁：

body {margin:0;}

來源

2013-06-21 15:31:02

確保你已經做了復位，在你的樣式表的頂部，以避免瀏覽器的默認值。

* { 
margin:0; 
padding:0; 
}

您可能會在網上找到其他重置片段，但僅此一項就會有所幫助。

來源

2013-06-21 15:32:28

我想通了，謝謝你的幫助。

的問題是在這一塊的代碼我沒有貼：

div.content{ 
     border: 1px solid #fbfbfb; 
     background-color: #fff; 
     max-width: 640px; 
     width: 100%; 
     padding: 2%; 
     margin: 0px auto; 
    }

我有邊距設置爲爲零以外別的東西。如果這

body { 
margin: 0; 
}

是沒有幫助

來源

2013-06-21 15:44:02 Aslet

所以它是代碼丟失，但仍然保證金重置。如果從一開始就提供所有信息，那麼您就有權將答案解決。很好你知道所有這些重置發送給你：第 –

，那麼還有另外一個CSS這些的人搞亂。

這裏是jsFiddle的示例

來源

2013-06-21 15:52:55 skmasq

爲什麼這個CSS導航欄不完全在頂部？

回答

相關問題