如何對齊輸入表單頂部的標籤？

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%; 
} 

希望ŧ他的幫助。