如何爲單個表中的不同行設置不同的行高？

我是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

如何爲單個表中的不同行設置不同的行高？

回答

相關問題