这是一个简单的问题,我确信我只是忽略了一些东西,但如果你注意到,在第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;
}
在此先感谢您的任何建议。