Я думаю, что ваша разметка нуждается в повторении.Используйте <label> s для описания меток элементов формы, а не <em> s.Там нет смысловой ценности в акценте.Кроме того, вы можете использовать сами метки, чтобы легко выровнять форму. Вот мой код (Пример из жизни) :
HTML
<form action="#" class="cleanForm" method="POST">
<fieldset>
<label><input type="text" name="firstname" placeholder="first name" required>
Please enter your first name</label>
<label><input type="text" name="lastname" placeholder="last name" required>
Enter your last name</label>
<label><input type="email" name="email" placeholder="e-mail" required>
Enter your e-mail address</label>
<label><input type="email" name="email2" placeholder="re-enter e-mail" required>
Re-enter your e-mail address</label>
<label><input type="password" name="password" placeholder="password" required>
Enter a password between 8 and 20 digits</label>
<label><input type="password" name="password2" placeholder="re-enter password" required>
Re-enter the password</label>
<div id="gender">
<label><input type="radio" name="gender" value="Female" checked>
Female</label>
<label><input type="radio" name="gender" value="Male">
Male</label>
</div>
<label class="tos"><input type="checkbox" id="agree-TOS">
I have read and agree to the <a href="#">Terms of Service</a>.</label>
</fieldset>
<button type="submit">Create account</button>
</form>
CSS
.cleanForm {
width: 550px;
}
fieldset > label > input {
display: block;
}
input[type="checkbox"] {
display: inline;
}
label {
margin: 10px;
padding: 5px;
}
fieldset > label {
float: left;
width: 200px;
}
label:nth-child(2n+1) {
clear: both;
}
#gender, .tos, button {
clear: both;
}
.tos {
width: 400px;
}
input[type="text"], input[type="email"], input[type="password"] {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.2);
-moz-box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.2);
box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.2);
padding: 5px;
}