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>

enter image description here

虽然我试图调整它们，但做得不够。如果您注意到重新输入密码字段，则表示未正确对齐。如果我们仔细注意，其他人也不是。我如何调整它们，我是一个常规的时尚。

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，您可以为它设置一些正确的填充。

Answer 2

标题css应该是这样的。

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

Answer 3

请参阅输出/代码和演示的小提琴

小提琴：http://jsfiddle.net/uDL8K/

演示：http://jsfiddle.net/uDL8K/embedded/result/

无法对齐某些文本字段

3 个答案: