HTML5導航

我已經在下面編碼了HTML & CSS。我在頁面右側定位nav時遇到問題。任何幫助深表感謝。HTML5導航

HTML

<header> 
    <h1>Heading</h1> 
    <nav> 
     <a href='#'>Projects</a> 
     <a href='#'>Pages</a> 
    </nav> 
</header>

CSS

body { 
    font-family: 'open sans'; 
    color: #333; 
} 

header { 
    padding: 20px 20px 20px 40px; 
} 

nav { 
    float: right; 
    margin-top: 38px; 
} 

nav a { 
    margin-right: 30px; 
} 

a { 
    color: #333; 
    text-decoration: none; 
} 

h1 { 
    float: left; 
    font-weight: 300; 
}

期望的結果 enter image description here

來源

2013-04-28 Susan Robinson

嗯......你想要的結果看起來像我用你的代碼製作的jsfiddle。 http://jsfiddle.net/DVnDw/它是如何出現在你的網站上的？ – SirDerpington 2013-04-28 09:04:45

@SirDerpington是我所有的CSS代碼嗎？ – 2013-04-28 09:07:19

這個問題在特定的瀏覽器中嗎？可能發生的事情是像IE8（或更老）的瀏覽器，它不處理HTML5標籤，沒有像[HTML5shiv]（http://code.google.com/p/html5shiv/） – Turnerj 2013-04-28 09:11:38

如果你的問題是，你認爲nav並沒有完全定位在右邊，它可能是因爲您給每個a元素的右邊距看起來很像。然後，最後一個將總是從右邊算起30個像素。所以，nav確實是在右邊，它只是a的餘量。

您可以通過這樣做可以避免這一點：

nav a:last-child { 
    margin-right: 0; 
}

我覺得代碼無需解釋。

來源

2013-04-28 09:34:17 pzin

回答

相關問題