Question

我正在尝试将两个输入表单放在彼此旁边，并在它们下面放置一些文本。不知怎的，它永远不会最终正确对齐。这张照片显示了我想要做的事情：

Example picture

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;
}

Answer 1

您将float:left应用于<input>，但未应用于<em>。这就是为什么所有字段都被推到左边，而标签仍保留在普通的页面流中。

一种可能的解决方案是将它们包装在<div>中并将float应用于：{/ p>

<强> 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>会更加明确。

Answer 2

你可以试试这个：

<强> HTML

<form action="#" class="cleanForm" method="POST">

        <fieldset>

<div class="column">
            <input type="text" name="firstname" placeholder="first name" required />
            <em>Please enter your first name</em>
            </div>
            <div class="column last">

            <input type="text" name="lastname" placeholder="last name" required />
            <em>Enter your last name</em>

</div>
<div class="column">
            <input type="email" name="email"  placeholder="e-mail" required />
            <em>Enter your e-mail address</em>
            </div>
<div class="column last">
            <input type="email" name="email2" placeholder="re-enter e-mail" required />
            <em>Re-enter your e-mail address</em>
            </div>
<div class="column">

            <input type="password" name="password" placeholder="password" required />
            <em>Enter a password between 8 and 20 digits</em>
            </div>
<div class="column last">


            <input type="password" name="password2" placeholder="re-enter password" required /><br />
            <em>Re-enter the password</em>
            </div>

        <p style="clear:both;">
            <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;

}
.column{
 width:250px;
 float:left;
 margin-right:20px;
 padding: 10px;   
}
.last{
 margin:0;
 padding: 10px;   
}

Output

Answer 3

我认为您的标记需要重做。使用<label>来描述表单元素标签，而不是<em> s。强调中没有语义价值。此外，您可以使用标签本身轻松对齐表单。的 Here's my code (Live Example Here) ：

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; }

Answer 4

@ PPvG的答案非常接近，但并不完美：

几乎在所有情况下，每个<input>代码都应该有匹配的<label>代码，而使用<em>的地方则是标签的理想位置。
在这种情况下，inline-block比float

我将如何做到这一点：

<强> HTML：

<div class="field">
    <input type="text" name="firstname" id="firstname_field" placeholder="first name" required />
    <label for="firstname_field">Please enter your first name</label>
</div>

<强> CSS：

div.field {
  display: inline-block;
  width: 200px;
}

div.field label
{
  display: block;
}

HTML / CSS对齐下面的两个输入和文本

4 个答案:

HTML

CSS