html - 无法对齐某些文本字段

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

您在 h1 元素上设置了 15px 的底部边距。而是将其设置为零。更好的是，在此处删除语义上所有错误的 h1 标记(它们是字段标签，而不是一级标题)，改用 label 并且根本不设置它们的边距.

特别是如果您为标签使用非常大 (200%) 的字体大小，请在最长的标签和输入字段之间设置一些额外的间距。使用 label，您可以为其设置一些正确的填充。