Question

我试图弄清楚如何将所有输入的左侧对齐在一起。现在整个.element行与左边对齐，因此所有输入字段都是交错的。我不希望输入错开我希望标签文本与右边对齐，输入全部对齐在一起。我已经尝试了一堆随机的CSS，但我似乎无法弄明白。有什么想法吗？

<form>

    <div class="element"><label>Name:</label><input name="Name" type="text" /></div>
    <div class="element"><label>Email:</label><input name="Email" type="text" /></div>
    <div class="element"><label>Phone:</label><input name="Phone" type="text" /></div>
    <div class="element"><label>Address Line 1:</label><input name="Address1" type="text" /></div>
    <div class="element"><label>Address Line 2:</label><input name="Address2" type="text" /></div>
    <div class="element"><label>City:</label><input name="City" type="text" /></div>
    <div class="element"><label>State:</label><input name="State" type="text" /></div>
    <div class="element"><label>Zip Code:</label><input name="ZipCode" type="text" /></div>
    <div class="element"><label>Birth Date:</label><input name="Bdate" type="text" /></div>
    <div class="element"><label>Class Selection:</label><input name="Class" type="text" /></div>
    <div class="element"><label>Preferred Meeting Time:</label><input name="Time" type="text" />   </div>

</form>

#registerwrapper .element {
margin-bottom: 15px;
vertical-align: middle;
}

#registrationwrapper label * {
float: left;
font-size: 16px;
}
#registrationwrapper input {
padding: 5px;
margin-left: 10px;
}

Answer 1

嘿现在已经习惯了这个样式表给你的标签 Display inline-block;并根据你的布局提供给width

Live demo

Answer 2

您问题的直接答案是：

label {
    display: block;
    margin-right: 5px; /* give some breathing room between your label and inputs */
    padding-top: ?px; /* add this if you're v-aligning to top to adjust the label alignment to the input */
    text-align: right;
    vertical-align: top; /* add this when you've got larger fields like textareas bumping things out of alignment */
    width: ?px;
}

但是，我觉得有必要问为什么要用div（图层）包装所有标签/字段组合？我推荐使用段落，如下所示：

<form>
    <p>
        <label for="">Field</label>
        <input id="" />
    </p>
</form>

而且您也不需要为每一行添加一个类。就这样做：

form p {
}

form p label {
}

form p input {
}

现在，您发送到客户端的字节数要少得多，而且HTML更容易阅读。

Answer 3

是否有人更改了您的代码，

请参阅链接：http://jsfiddle.net/anglimass/V4HAM/8/

如何对齐表单中的所有输入

3 个答案: