css - HTML5 导航

Question

我在下面编写了 HTML 和 CSS。我在将导航定位在页面右侧时遇到问题。任何帮助深表感谢。

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;
}

期望的结果

Answer 1

如果您的问题是您认为它nav没有完全定位在右侧，则可能是因为您为每个元素提供了右边距，所以看起来如此。a然后，最后一个将始终从右侧 30 像素。所以，nav真的是在右边，只是a边距不是。

你可以通过这样做来避免这种情况：

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

我认为代码不需要解释。