1

我试图弄清楚如何将所有输入的左侧对齐在一起。现在整个 .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;
}
4

3 回答 3

3

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

现场演示

于 2012-08-09T06:27:15.153 回答
0

你的问题的直接答案是这样的：

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 更容易阅读。

于 2012-08-09T06:29:51.160 回答
0

有没有改变你的代码，

见链接：http: //jsfiddle.net/anglimass/V4HAM/8/

于 2012-08-09T06:39:02.700 回答