html - 文本框与文本成比例对齐

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/>元素。它们在表单中没有任何值(value)。
• 使用<label> s，这就是他们的目的。您可以将标签 和 的输入包裹在 <label> 中标记，或者您可以使用 <label for="element_id">Label</label><input id="element_id"> .
• 保持一致。如果您决定使用 <br />单数标签的格式类型，坚持使用 <input />也是。
• 为特定输入使用正确的输入类型，有type="email"对于电子邮件字段，可以选择让浏览器检查您的电子邮件地址是否有效!
• 使用 CSS 进行设计和布局，而不是 <p> s 和 <br> s.

祝你好运!