如何在输入表单顶部对齐标签？

Question

我正在努力将我的标签与我的表格对齐。

这就是我想要的方式：

到目前为止，这是我编码的方式，显然不起作用。

<label for="email">Email address</label>
    <input type="email" id="email" />

    <label for="password_field">Password </label><span><a href="#">Forgot your password?</a></span>
    <input type="password" id="password_field" />

    <input type="submit" value="Sign in" id="sign_in_form" />

这是CSS：

header input[type="email"], header input[type="password"], label {
display:block;
}

我不确定如何对齐标签，而且我的链接不是我希望在其旁边保留的范围的一部分。我迷路了。

有人能帮帮我吗？

Answer 1

以下是一个解决方案：http://jsfiddle.net/yLaxs/

<label for="email">Email address
    <input type="email" id="email" />
</label>
    <label for="password_field">Password <a href="#">Forgot your password?</a>
    <input type="password" id="password_field" />
</label>
<label>
    <br />
    <input type="submit" value="Sign in" id="sign_in_form" />
</label>

和css

label
{
    float:left;
    width:30%;
}
a
{
    font-size:8px;
}

Answer 2

你可以做的一种方法是添加一个带有类的包装div并添加一些CSS。

HTML：

<div class="inputWrapper">
  <label for="email">Email address</label>
  <input type="email" id="email" />
</div>

<div class="inputWrapper">
  <label for="password_field">Password </label><span>
  <input type="password" id="password_field" />    
</div>

<input type="submit" value="Sign in" id="sign_in_form" />
<a href="#">Forgot your password?</a></span>

CSS：

.inputWrapper label{
  display:block;
}

以下是codepen的快速演示：http://codepen.io/miguel2k/full/lxopE

Answer 3

Working Example

<label for="email">Email address <br/>
<input type="email" id="email" />
</label>
<label for="password_field">Password <a href="#">Forgot your password?</a>
<input type="password" id="password_field" />
</label>
<label>
<br />
<input type="submit" value="Sign in" id="sign_in_form" />
</label>

label
{
float:left;
width:30%;
}

希望这有帮助。