0

我是 html 新手，所以请尝试理解我是否犯了任何愚蠢的错误。我正在尝试创建一个像 Facebook 一样的登录窗口。我创建了一个如下所示的登录窗口： 在此处输入图像描述

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

 <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以实现上述。提前致谢。. .

4

2 回答 2

0

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

在旁注中，我建议您避免使用这种布局的表格并使用 div 实现相同的布局。

于 2013-10-18T10:29:47.150 回答
0

理想情况下，您不应该将表格用于布局目的。

在您的示例中，我会尝试删除复选框周围的边距，只留下右边距，如下所示：

<input type="hidden" name="default_persistent" value="0" style="margin: 0 5px 0 0;>

这应该够了吧。

于 2013-10-18T10:27:19.643 回答