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

我是html新手，所以请尝试了解我是否犯了一个愚蠢的错误。我正在尝试创建一个类似于脸书的登录窗口。我创建了一个如下所示的登录窗口： enter image description here 如何为单个表中的不同行设置不同的行高？

这里我采取了2行第一行的表格呈现2个文本框和一个登录按钮。第二包括'记住我'和'forgor密码'链接。问题是，我想第二行高度为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才达到上面提到的。在此先感谢。。。

来源

2013-10-18 sachin_ware

在包含记住我的文本的跨度上尝试vertical-align：middle。

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

来源

2013-10-18 10:29:47

Thanx @ code.tweetie，它的工作。但请，你能告诉我如何降低第二排的高度，以便它的文本高度相同 –

我不想告诉你尝试以下操作：{margin ：0}在复选框＆for td {line-height：11px; margin：0; padding：0} –

理想情况下，您不应该使用表格进行布局。

在你的榜样，我会试着在复选框去除边缘，只留下右侧边缘像这样：

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

这应该做的伎俩。

来源

2013-10-18 10:27:19 boz

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

回答

相关问题