css - 为什么表格上方有空隙？

Question

我想实现这个:

我已经做到了:

我不明白为什么登录表单上面有空隙？还有为什么字段和“登录”按钮没有正确对齐？该页面位于 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

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="">
   

   这样 float 很有趣， float 本身应该在代码中出现在它 float 旁边的内容之前。

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