This is a simple issue, and i'm sure i am just overlooking something but if you will notice, in the 4th row , the label isn't aligning vertically . Take a look at it here on 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;
}
Thanks in advance for any suggestions.
Include label { vertical-align: top; }
label { vertical-align: top; }
See this jsFiddle .
guess i fixed it myself...lol i needed to add:
form label,form input,form textarea { vertical-align:middle }
to the css
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.