html - 如何为单个表中的不同行设置不同的行高？

Question

我是 html 的新手，所以如果我犯了任何愚蠢的错误，请尝试理解。我正在尝试创建一个像 Facebook 一样的登录窗口。我创建了一个登录窗口，如下所示:

在这里，我采用了 2 行的表格，第一行呈现 2 个文本框和一个登录按钮。第二个由“记住我”和“忘记密码”链接组成。问题是我希望第二行高度为 12px 和文本“记住我”显示在复选框的正中心，而不是它在上图中看起来有点向下。我已经写了一些临时的内联 css 来检查一下:以下是本节的代码:

 <table style="float:left;margin-top:1%">
                    <tbody>
                        <tr>
                                <td style="padding-right: 0px;background:blue;">
                                    <div class="uiStickyPlaceholderInput uiStickyPlaceholderEmptyInput">
                                        <input type="text" style=" width:110px;text-align:center;"class="inputtext _5aju" id="email" name="email" placeholder="E-mail" tabindex="1" value="" aria-label="Email or Phone">
                                    </div>
                               </td>

                               <td style="padding-right: 0px;background:red">
                                     <div class="uiStickyPlaceholderInput">
                                       <input type="password" style=" width:105px;text-align:center;float:right;" class="inputtext _5aju" id="pass" name="pass" placeholder="Password" tabindex="2" value="" aria-label="Password">
                                     </div>
                                </td>

                                <td >
                                     <button value="1" class="_42ft _42fu _5ajv selected _42g- btn btn-primary btn-small" id="loginbutton" tabindex="4" type="submit">Log In</button>
                                </td>
                         </tr>
                         <tr height="12" style="background:pink;">
                                <td height="10">
                                    <span class="_5ajw">
                                        <div>   
                                            <label class="_5bb4">
                                                 <input id="persist_box" style="height:10px;background:yellow" type="checkbox" name="persistent" value="1" tabindex="3">
                                                 <span style="font-size:10px;margin-top:-5px;background:yellow">Remember me</span>
                                            </label>
                                            <input type="hidden" name="default_persistent" value="0">
                                         </div>
                                   </span>
                                 </td>

                                 <td  style="margin-top:-1%;">
                                     <a class="_5ajx" rel="nofollow" href="https://www.google.com" 
                                     style="font-size:10px;paddig-left:2px;margin-top:-1%;background:yellow;">Forgot your password?</a>
                                 </td>
                         </tr>
                       </tbody>
                   </table>

那么，谁能告诉我如何调整 css 以实现上述目标。提前致谢。 . .

Answer 1

在包含记住我文本的跨度上尝试垂直对齐:中间。

附带说明一下，我建议您避免使用表格进行这种布局，并使用 div 实现相同的布局。