为什么形式上方存在差距？

Question

我想实现这个目标：

我已经实现了这个目标：

我不明白为什么登录表单上方有差距？另外为什么字段和'LOGIN'按钮没有正确对齐？该页面位于http://goo.gl/OpAB4V

标记：

<div id="container">
<header>
<img src="images/tellerest-homepage-design_02.png" alt="">
<div id="header-login">
<form id="header-login-form">
<input name="username" type="text" placeholder="Username" class="header-login-form-field">
<input name="password" type="password" placeholder="Password" class="header-login-form-field">
<input name="submit" type="image" src="images/tellerest-homepage-design_05.png">
</form>
</div>
</header>
</div>

CSS：

body {
margin: 0 auto;
background-image: url(images/tellerest-homepage-design2_04.jpg);
background-repeat: repeat;
}
#container {
background-image: url(images/tellerest-homepage-design2_01.png);
background-repeat: repeat-x;
background-position: center top;
height: 1000px;
}
header { width: 950px; margin: 0 auto; text-align: left;}
#header-login { float: right; text-align: right; height: 10px; margin: 15px; vertical-align: bottom;}
#header-login-form { padding: 0;}
#header-login-form input { margin: 0 0 0 10px; overflow: hidden;}

Answer 1

div标签是块标签，因此它无法将自己定位在图像的右侧。您必须为包含表单和行为/位置的div定义宽度

#header-login{
 width:500px;
 float:right;
}

img{ float:left; }

Answer 2

1. HTML更改 - 在<div id="header-login"> -

   之前移动<img>

   <div id="header-login">
    <form id="header-login-form">
     <input name="username" type="text" placeholder="Username" class="header-login-form-field">
     <input name="password" type="password" placeholder="Password" class="header-login-form-field">
     <input name="submit" type="image" src="images/tellerest-homepage-design_05.png">
    </form>
   </div>
   <img src="images/tellerest-homepage-design_02.png" alt="">
   

   浮点数很有趣，浮动本身应该主要出现在它浮动的内容之前的代码中。

2. CSS更改 - 将float: right添加到#header-login。将vertical-align: bottom添加到那里的所有input，或vertical-align: top添加到输入字段，因为它们中的每一个都可能在该属性的隐式默认值中有所不同。

Answer 3

将标题图片设为float：left和heder-login以浮动

img{
float:left;
}

#header-login{
 float:right;
}