奇HTML5/CSS行爲

請看看這個：http://jsfiddle.net/MbrJf/奇HTML5/CSS行爲

當我使用檢查元素，人體從頁面的頂部開始100像素，雖然沒有保證金或類似的東西在CSS 。如果從頁面中刪除<nav>元素，則一切正常（即使從css中刪除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; 
}

來源

2012-10-28 Peter Di Cecco

如果鏈接失效，請在問題中發佈代碼以保持將來的實用性。 – Sparky

設置在nav的margin-top和ul到0的資產淨值中：

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

保證金將推動身體向下，與ul，其中必須要取消的默認保證金（你應該使用復位或標準化CSS文件）

編輯

然後你會想像這樣：http://jsfiddle.net/MbrJf/4/？在這種情況下的潛在問題是header未正確包含徽標h1，因爲它是float ed。應用像clearfix或overflow:hidden這樣的標準解決方案之一就可以解決這個問題。

來源

2012-10-28 16:24:43

另一個問題，雖然不是導致不良行爲的一個問題，但是您要複製整個文檔。使用JSFiddle，你只能把標籤放在'body'中。 – jmeas

問題是導航應該有一個邊距，但h1和地址也不應該被壓低。我試圖做到這一點：http://imgur.com/zgBFm –

'溢出：隱藏;'似乎工作。我從來沒有聽說過這個修復，感謝您的幫助！ –

奇HTML5/CSS行爲

回答

相關問題