我试图将两个输入表单放在一起,并在它们下面放置一些文本。不知怎的,它永远不会正确对齐。这张图显示了我正在尝试做的事情:
HTML:
<form action="#" class="cleanForm" method="POST">
<fieldset>
<input type="text" name="firstname" placeholder="first name" required>
<em>Please enter your first name</em>
<input type="text" name="lastname" placeholder="last name" required>
<em>Enter your last name</em>
<input type="email" name="email" placeholder="e-mail" required>
<em>Enter your e-mail address</em>
<input type="email" name="email2" placeholder="re-enter e-mail" required>
<em>Re-enter your e-mail address</em>
<input type="password" name="password" placeholder="password" required>
<em>Enter a password between 8 and 20 digits</em>
<input type="password" name="password2" placeholder="re-enter password" required />
<em>Re-enter the password</em>
<p>
<input type="radio" name="gender" value="Female" checked>
<label for="female">Female</label>
<input type="radio" name="gender" value="Male">
<label for="male">Male</label>
</p>
<p>
<input type="checkbox" id="agree-TOS">
<label for="agree-TOS">I have read and agree to the <a href="#">Terms of Service</a>.</label>
</p>
<input type="submit" value="Create account">
</fieldset>
</form>
CSS:
form.cleanForm {
width:700px;
margin:0 auto;
}
form.cleanForm p {
margin-bottom:15px;
}
input[type="email"], input[type="password"], input[type="text"] {
font-family: Arial, Sans-Serif;
font-size: 18px;
color: #adadad;
padding: 10px;
outline:none;
float:left;
border: solid 1px #adadad;
width: 230px;
transition: all 2s ease-in-out;
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
-moz-box-shadow:inset 0 0 5px 5px #E6E6E6;
-webkit-box-shadow:inset 0 0 5px 5px #E6E6E6;
box-shadow:inset 0 0 5px 5px #E6E6E6;
clear: right;
}
input[type="email"]:focus, input[type="email"]:hover, input[type="password"]:focus,
input[type="password"]:hover, input[type="text"]:focus, input[type="text"]:hover {
border:1px solid #FF003F;
}
form.cleanForm em {
font-size:12px;
}
最佳答案
您正在申请float:left
到<input>
s,但不是<em>
s。这就是为什么所有字段都被推到左侧,而标签保留在普通页面流中。
一种可能的解决方案是将它们都包装在 <div>
中并应用 float
对此:
HTML:
<div class="field">
<input type="text" name="firstname" placeholder="first name" required />
<em>Please enter your first name</em>
</di>
CSS:
div.field {
float: left;
}
此外,使用 <label>
在语义上会更正确。而不是<em>
.
关于HTML/CSS 对齐两个输入和下面的文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8629870/