невозможно выровнять некоторые текстовые поля

Question

Вот дизайн выложенного мною кадра:

<div id=site_content>
<div id = left_content>
<table>
                            <tr>
                                <td> <h1> First Name </h1> </td>
                                <td> <input type="text" name="FirstName" /> </td>
                            </tr>
                            <tr>
                                <td> <h1> Last Name </h1> </td>
                                <td> <input type="text" name="LastName"/> </td>
                            </tr>
                            <tr>
                                <td> <h1> Email </h1></td>
                                <td> <input type="email" name="Email"/> </td>
                            </tr>
                            <tr>
                                <td> <h1> Password </h1> </td>
                                <td> <input type="password" name="Password"/> </td>
                            </tr>
                            <tr>
                                <td> <h1> Retype Password </h1> </td>
                                <td> <input type="password" name="RetypedPassword"/> </td>
                            </tr>
                            <tr>
                            <td colspan="2"> <center> <input type="submit" value="submit" /> </center> </td>
                            </tr>
                        </table>
      </div></div>

Хотя я пытался выровнять их, но не смог сделать достаточноЕсли вы заметили поле Retype Password , оно неправильно выровнено.И другие, если мы заметим внимательно, они тоже нет.Как я могу выровнять их, в том числе и обычным способом.

CSS:

h1, h2, h3, h4, h5, h6 { 
  font: normal 200% 'Yanone Kaffeesatz', arial, sans-serif;
  margin: 0 0 15px 0;
  padding: 0 0 5px 0;}

#site_content { 
 width: 950px;
 overflow: hidden;
 margin: 4px auto 0 auto;
 padding: 0;}

#left_content { 
 float: left;
 text-align: justify;
 width: 444px;
 padding: 20px 0 5px 25px;
 margin: 0;}

Answer 1

Вы устанавливаете нижнее поле в 15px для элементов h1. Вместо этого установите его на ноль. А еще лучше, отбросьте здесь семантически всю неправильную разметку h1 (это метки полей, а не заголовки первого уровня), вместо этого используйте label и вообще не устанавливайте их поля.

Особенно, если вы используете очень большой (200%) размер шрифта для надписей, установите дополнительный интервал между самой длинной надписью и полем ввода. Используя label, вы можете просто установить для него правильное заполнение.

Answer 2

См. Скрипту для вывода / кода и демоверсии

Скрипка: http://jsfiddle.net/uDL8K/

Демо: http://jsfiddle.net/uDL8K/embedded/result/

Answer 3

заголовок css должен быть таким:

h1, h2, h3, h4, h5, h6 { 
  font: normal 200% 'Yanone Kaffeesatz', arial, sans-serif;
}