HTML 和 CSS 定位

Question

我已经对下面的布局进行了编码，但是在测试时“登录或注册”链接没有定位到页面的右侧。任何帮助表示赞赏。

HTML

<header>
   <h1>Heading</h1>
   <p>A clean, minimal, grid-based layout focusing attention on your work.</p
   <a href="/">Login or Signup</a>
</header>

CSS

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

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

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

h1, h2 {
  font-weight: 300;
}

期望的结果

Answer 1

这是一个可行的解决方案:

DEMO

html

<header>
   <a href="/">Login or Signup</a>
   <h1>Heading</h1>
   <p>A clean, minimal, grid-based layout focusing attention on your work.</p>
</header>

CSS

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

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

header a {
  color: #333;
  text-decoration: none;
  float: right;
  padding-top: 30px;
}

h1, h2 {
  font-weight: 300;
}