これは単純な問題であり、私は何かを見落としているだけだと確信していますが、4行目でラベルが垂直に整列していないことに気付くでしょう。こちらの JSFiddle をご覧ください。
http://jsfiddle.net/uidezigns/HJEca/
HTML
<form class="lable_left">
<p>
<label for="fn">First name:</label>
<input type="text" name="fn">
</p>
<p>
<label for="ln">Last name:</label>
<input type="text" name="ln">
</p>
<p>
<label for="ph">Phone Number:</label>
<input type="tel" name="ph">
</p>
<p>
<label for="ad">Street Address:</label>
<textarea name="ad"></textarea>
</p>
<p>
<label for="ct">City:</label>
<input type="text" name="ct">
</p>
<p>
<label for="st">State:</label>
<input type="text" name="st">
</p>
<p>
<label for="zc">Postal:</label>
<input type="text" name="zc">
</p>
<input type="submit" value="Submit">
</form>
CSS
/* --- skins for visibility - Remove for implementation --- */
form {
margin: 40px;
padding: 20px;
background-color: #FAE2BF;
}
form p {
background-color: #F7CBC7;
}
form label {
background-color: #E5E2DB;
}
/*----------------------------------------------------------*/
form {
font: normal 12px Arial;
display: block;
}
form p {
padding: 0;
margin: 2px 0;
float: left;
width: 100%;
}
form.two_row p {
width: 50%;
}
form.three_row p {
width: 33%;
}
form label,form input,form textarea {
display: block;
}
label {
margin: 10px 0 0;
}
input {
}
textarea {
width: 100px height:100px;
margin: 0;
}
form.lable_left p {
display: table-cell;
vertical-align: middle;
}
form.lable_left label,form.lable_left input,form.lable_left textarea {
display: inline-block;
margin: 0;
}
form.lable_left label {
width: 120px;
}
form.lable_left input {
}
input[type="submit"] {
clear: both;
float: none;
}
ご提案いただきありがとうございます。