html - HTML5 和 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

关闭<p>标签

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

在链接上放置一个 div 以使其正确浮动。是一种选择。

#login{
float:right;
}

Answer 2

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

演示

Answer 3

您可以通过使用浮动来实现此布局，并将页面的不同侧面包装在div标签中，这些标签基本上充当容器。

HTML：

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

CSS：

#title-desc{
float: left;
}

#login-box{
float: right;
}

工作示例

Answer 4

我会将您的登录名/注册名放入它自己的 div 或 span 或其他内容中。然后在 CSS 中指定你想要的位置。