html - 在页面顶部放置登录表单时遇到一些问题

Question

大家好，我正在为我的大学任务创建一个网站，我正在努力将我的登录名放在我页面的右上角。我是这个软件的新手，我试过将它放在右上角的页面上，但是当我使用一些高度和宽度代码时它似乎没有移动。它被称为“家庭形式”。另外，如果有人可以修复这三个框，以便当我向下挤压页面时，三个框在彼此下方排成一行，那将是很好的。感谢任何帮助，谢谢。

FIDDLE

HTML:

  <div id="wrapper">
  <div id="top">
  <div class="logo"> </div>
  <div id="homeform">
  <input type="email"
  placeholder="Your E-Mail">
  <input type="password"
  placeholder="Your Password">
  <input type="submit" value="Login">
  </div>


    </div>
   <div id="menu">
    <div class="button"> Home </div>
    <div class="button"> Destinations </div>
   <div class="button"> Make A Booking </div>
   <div class="button"> Things To Do </div>
   <div class="button"> Contact Us </div>
   </div>
   <div id="box">
   content here
   </div>
   <div id="threeBoxContainer">
   <div id="deal_one"></div>
   <div id="deal_two"></div>
  <div id="deal_three"></div>
  </div>
  <div id="bigbox"></div>

    </div> 

CSS:

    body {
margin: 0;
padding: 0;
    }

   #wrapper
   {
   width: 80%;
   position:relative;
   margin: 0 auto;

    }

     #top
    {

width:100% ;
height:200px;
background-color:rgba(0, 95, 160, 1);
border:solid 2px black;
position:relative;


    }
    #menu {
width: 100%;
height: 150px;
background-color: #fff;
border: solid 2px black;
text-align:center;
position: relative;
display: inline-block;

}

    #box {
width:100% ;
min-height:500px;
background-color:rgba(0, 95, 160, 1);
margin-top:0;
border:solid 2px black;
position:relative;
     }
    .button {
font-family:Verdana, Geneva, sans-serif;
font-size:13.5pt;
display:inline-block;
margin: 0 auto;
margin-left:5%;
margin-right:5%;
margin-top:4.5%;
}
    .logo {
position:relative;
background-image:url(../Images/Logo%203.png);
background-size:650px;
width:500px;
height:900px;
top:-30%;
display:inline-block;
z-index:500;
margin: 0 auto;
background-repeat:no-repeat;
margin-left:-10%;
    }

    #threeBoxContainer div
    {
      display:inline-block;
    }

       #deal_one {
       width:32.5%;
       height:300px;
    background-color:rgba(0, 95, 160, 1);
    border: solid 3px black;
    margin-top: 5%;
    }

    #deal_two {
    width:32.5%;
   height:300px;
   background-color:rgba(0, 95, 160, 1);
  border: solid 3px black;
  margin-top: 5%;
  }

   #deal_three {
  width:32.5%;
  height:300px;
  background-color:rgba(0, 95, 160, 1);
  border: solid 3px black;
  margin-top: 5%;
 }

 #bigbox {
 width: 100%;
 height: 150px;
 background-color:rgba(0, 95, 160, 1);
 border: solid 2px black;
 margin-top: 5%;
 }


 #homeform {
 width:90%;
 height:100%;
 position:relative;
 }

Answer 1

可能像这样:

演示:http://jsfiddle.net/pbWjA/2/

#homeform {
    top:0px;
    right:0px;
    width:90%;
    height:100%;
    text-align: right;
    position:absolute;
}