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

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

HTML:

---

您正在将

float:left

应用于

s，但未应用于

s。这就是为什么所有字段都向左推，而标签保持在普通页面流中的原因

一种可能的解决方案是将它们都包装在

中，并将

浮点值应用于该值：

HTML:

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

div.field {
    float: left;
}

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

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

div.field label
{
  display: block;
}

此外，使用a而不是
在语义上更为正确。您可以尝试以下方法：

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>

我认为您的标记需要重做。使用
s来描述表单元素标签，而不是
s。强调中没有语义价值。此外，还可以使用标签本身轻松对齐表单：

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


几乎在所有情况下，每个
标记都应该有一个匹配的
标记，并且您使用
的位置是放置标签的理想位置
在这种情况下，
inlineblock
比
float

我会这样做：

HTML:

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

div.field {
    float: left;
}

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

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

div.field label
{
  display: block;
}

首先，在“输入您的姓氏”字段中有一个额外的
“
”“
。其次，您提供的代码与您正在尝试的代码完全不同。我意识到这就是问题所在，但在尝试完成屏幕截图时，您不会意外地得到完美的内联标签。是否要放弃内联标签，而改为字段下的常规标签？如果是这样的话，你有没有试过自己去做呢？EM应该是一个标签，而不是…“女性”是预选的？那是歧视<代码>：P

所有这些表单字段都应该在段落中。如果其中一些是，所有的都应该是（为了一致性）。这就是我在中所做的。它可以工作，但可能需要一些调整。@john，是的，我只是创建了一个简化版本…：-）在这里使用UL元素更有意义。这六个表单字段代表一个类似项目的列表。我不喜欢在

标记周围包装

标记，它太不灵活，常常使CSS更复杂。如果我错了，请纠正我，我的CSS比OP的更清晰。此外，如果输入旁边有标签，没有理由不这样做。（如果由于某种原因标签被放置在标签的不同部分，或者您正在使用某种JavaScript隐藏/显示标签上的元素单击等，那么这是可以理解的。请注意，这种方法是按照规范进行的。我意识到它是按照规范进行的，工作正常，我只是从经验中发现它会导致问题。我更喜欢包装标签仅围绕标签，而不是其他，特别是如果将来设计发生变化。一般来说，我更喜欢避免在输入上出现类似

display:block；

的事情…您可以改为制作标签块。thx非常抱歉，回复太晚了。这对我帮助很大，解释和实时预览也很棒！不能想一个更好的答案：）再次感谢！！！我接受了它，但它不会让我投票，因为我的代表太低了：（thx再次！我爱你（不是同性恋）哈哈

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

div.field label
{
  display: block;
}