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

【问题标题】：HTML/CSS aligning two inputs and text underneathHTML/CSS 对齐两个输入和下面的文本
【发布时间】：2026-01-13 11:20:04
【问题描述】：

我正在尝试将两个输入表单并排放置，并在它们下方放置一些文本。不知何故，它永远不会正确对齐。这张照片显示了我正在尝试做的事情：

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

【问题讨论】：

首先，您在“输入您的姓氏”<em> 中多了一个"。其次，您提供的代码看起来与您正在尝试做的完全不同。我知道这就是问题所在，但您在尝试完成屏幕截图时不会意外地得到完美的内联标签。
您想摆脱内联标签以支持字段下的常规标签吗？如果是这样，您是否尝试过自己这样做？
那个 EM 应该是 LABEL 的...
“女性”是预选的吗？那是歧视！！ :P
所有这些表单域都应该在段落中。如果其中一些是，那么所有都应该是（为了一致性）。

标签： html css text input alignment

【解决方案1】：

您将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> 在语义上更正确。

【讨论】：

这就是我在this fiddle 中所做的。它可以工作，但可能需要进行一些调整。
@john，是的，我只是在创建一个简化版本here... :-)
这里使用 UL 元素更有意义。这六个表单域代表一个类似项目的列表。

【解决方案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

【讨论】：

【解决方案3】：

我认为您的标记需要重做。使用<label>s 来描述表单元素标签，而不是<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;
}

【讨论】：

我不喜欢将<label> 标签包裹在<input> 标签周围，它太不灵活并且经常使CSS 更加复杂。
如果我错了，请纠正我，我的 CSS 比 OP 更清晰。此外，如果您在输入旁边有标签，则没有理由不这样做。（如果标签由于某种原因被放置在标签的不同部分，或者您正在使用某种 JavaScript 来隐藏/显示标签单击时的元素等，那么这是可以理解的。请注意，这种方法是符合规范的。
我意识到它符合规格并且工作正常，我刚刚从经验中发现它会导致问题。我更喜欢将标签包裹在 just 标签周围，而不是其他任何东西，特别是如果将来设计发生变化。一般来说，我更愿意避免在输入中避免使用 display: block; 之类的东西...您可以改为使用标签块。
非常感谢，很抱歉回复晚了。这对我有很大帮助，解释和实时预览也很棒！想不出更好的答案:) 再次感谢！！！
我接受了它，但它不会让我投票，因为我的代表太低了 :( 再次感谢！我爱你（不是同性恋）哈哈

【解决方案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;
}

【讨论】：