为什么在窗体上面有间隙？ [英] Why is there gap above the form?

问题描述

我想达到这个目的：

我实现了这一点：

我不明白为什么登录表单上面有空格？还有为什么字段和登录按钮不正确对齐？该页面现在位于 http://goo.gl/OpAB4V

I don't understand why is there gap above the login form? Also why the fields and 'LOGIN' button not aligned correctly? The page is live at 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;}

推荐答案

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

1. HTML changes - move <div id="header-login"> before the <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="">

浮动是这样有趣的，浮动本身应该主要出现在代码之前的内容旁边

Floats are funny this way, the float itself should mostly appear in the code before the content beside which it floats.

CSS更改 - 添加 float：right 到＃header- login 。将 vertical-align：bottom 添加到所有输入，或 vertical-align： / code>到输入字段，因为每个输入字段的隐式默认值可能不同。

CSS changes - add float: right to #header-login. Add vertical-align: bottom to all input there, or vertical-align: top to the input fields, because each of them likely varies in its implicit default value of that property.

这篇关于为什么在窗体上面有间隙？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！