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 を配置して、正しくフロートさせます。1つのオプションです。

#login{
float:right;
}

Answer 2

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 3

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 4

ログイン/サインアップを独自の div または span または何かに入れます。次に、CSS で必要な場所の位置を指定します。