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

这是一个有效的解决方案：

演示

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 2

首先，请以正确的方式编写html并使用类名编写css。

这是你的答案：

HTML：

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

CSS：

* {
   padding: 0;
   margin: 0;
  }

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

 header {
   padding: 20px;
  }

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

 h1, h2 {
   font-weight: 300;
   margin :0;
   padding: 0;
 }
 header h1{
   width: 70%;
   display: inline-block;
 }
 header a{
    width: 30%;
    display: inline-block;
    padding-top: 10px;
 }

演示链接

Answer 3

   <div class="wrapper" style="margin:auto; width:960px:">
        <div class="header" style="height:80px;">
            <div style="float:left">
                <h1 style="float: left;">Heading</h1>
            </div>
            <div class="login" style="float:right">
                           <a href="/">Login or Signup</a>
            </div>
       </div>
       <div class="DisplayArea" style="float:left;">
           <p>A clean, minimal, grid-based layout focusing attention on your work.</p>
       </div>
   </div>

.wrapper{
     margin:auto;
     width:960px;
    }

看看这是否有帮助...

我总是发现使用 .

Answer 4

首先>在末尾有一个缺失<p>...</p>

然后试试这个：CSS

a
{
color: #333;
text-decoration: none;   
display : block;
float : right;
}

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>

和 jsFiddle http://jsfiddle.net/HxWNh/

Answer 5

一些小的变化。H1 和 p 具有全宽，因此 a 必须低于 p。将CSS更改为

    a {
  color: #333;
  text-decoration: none;
  float: right;
  margin-right: 70px;
}
p{width: 70%;float: left;}
h1, h2 {
  font-weight: 300;
  width: 70%;
  float: left;
}

会正常工作。