Выравнивание текстового поля пропорционально тексту

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

Самая минимизированная версия, которую я мог придумать ...

<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;
}​

---

Поскольку ОП отредактировал свой вопрос, включив в него свою разметку, я расширю ответ.

Некоторые улучшения:

• Удалите пустой элемент <p> и элементы <br/>. Они не имеют значения внутри формы.
• Используйте <label> s, вот для чего они были созданы. Вы можете обернуть метку и входом внутри тега <label>, или вы можете использовать <label for="element_id">Label</label><input id="element_id">.
• Будьте последовательны. Если вы решили использовать формат <br /> для единичных тегов, используйте также <input /> s.
• Используйте правильные типы ввода для определенных вводов, для поля электронной почты есть type="email", в котором при необходимости браузер может проверить, является ли это действительный адрес электронной почты или нет!
• Используйте CSS для дизайна и верстки, а не <p> s и <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 на ярлыки, чтобы каждый из них был на новой строке.