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

回答

相关问题