文本框与文本成比例的对齐方式

Question

如何更正以下电子邮件文本框对齐方式：？

使它看起来像这样：

我知道我可以使用表格，但如何在不使用表格的情况下解决此问题？ CSS也许？

HTML：

<form action="" name="contactform" method="post">
<p></p>
First name: <input type="text" class="contact" name="contactfirstname" value="">
<br/>
Last name: <input type="text" class="contact" name="contactlastname" value="">
<br/>
E-mail: <input type="text" class="contact" name="email" value="">
<p></p>

Answer 1

<强> The most minimalized version I could think of...

<form>
    <label>First Name: <input type="text" name="firstName"></label>
    <label>Last Name: <input type="text" name="lastName"></label>
    <label>Email Address: <input type="email" name="emailAddress"></label>
</form>​

和

form {
    width: 300px;
}
label {
    display: block;
    margin: 5px;
    padding: 5px;
    clear: both;
}
label input {
    float: right;
}​

---

由于OP编辑了他的问题以包含他的标记，我将扩大答案。

一些改进点：

• 删除空的<p>元素和<br/>元素。它们在表单中没有任何价值。
• 使用<label>，这就是他们的目的。您可以将标签和包装在<label>标记内，也可以使用<label for="element_id">Label</label><input id="element_id">。
• 保持一致。如果您决定使用<br />格式的单数标签，请同时将其粘贴到<input />。
• 为特定输入使用正确的输入类型，电子邮件字段有type="email"，如果它是有效的电子邮件地址，可以选择让浏览器为您检查！。
• 使用CSS进行设计和布局，而不是<p>和<br> s。

祝你好运！

Answer 2

我假设您的HTML类似于：

<p>
   Email
   <input />
</p>

将其更改为：

<p>
   <label>Email</label>
   <input />
</p>

这意味着您可以对所有标签应用固定宽度，使其保持一致：

label
{
width:100px;
float:left;
}

<强> http://jsfiddle.net/zvWqk/1/

---

或者正如@Zeta指出的那样，将输入嵌套在标签内，并向右浮动。这样可以防止您需要在标签上应用for属性。

http://jsfiddle.net/tt8gx/

Answer 3

使用CSS使标签显示为块元素并具有固定宽度。将输入显示为块元素并将其向左浮动。在标签上放置一个clear:left，这样它们就会在新的一行上。