valign =「top」在一個單元格中不起作用

我有一個表格，左列設置爲valign =「top」。它適用於除最後一個之外的所有單元。我沒有給這個單元應用任何類，所以我很困惑。valign =「top」在一個單元格中不起作用

我演示的網站位於這裏here。問題在於在頁面底部包含單詞「message *」的單元格。

下面是HTML：

<form action="form.php" method="post" class="form" id="contact"> 
    <table width="100%" border="0" cellspacing="0"> 
     <tr> 
      <td width="20%" align="left" valign="top"> 
      <label for="name" class="lable">name<span class="red">*</span></label></td> 
      <td align="left" valign="top"> 
      <input name="name" type="text" class="textfield" id="name" value="what do you call yourself?" size="50" maxlength="30" /></td> 
     </tr> 
     <tr> 
      <td width="20%" align="left" valign="top"> 
      <label for="email" class="lable">e-mail<span class="red">*</span></label></td> 
      <td align="left" valign="top"> 
      <input name="email" type="text" class="textfield" id="e-mail" value="i promise i won't spam you." size="50" maxlength="50" /></td> 
     </tr> 
     <tr> 
      <td width="20%" align="left" valign="top"> 
      <label for="project" class="lable">project</label></td> 
      <td align="left" valign="top"> 
      <div class="selectBG"> 
       <span>please select...</span> 
       <select name="project" id="project"> 
       <option>please select...</option> 
       <option value="branding">branding</option> 
       <option value="logo">logo</option> 
       <option value="package">package</option> 
       <option value="poster">poster</option> 
       <option value="puclication">publication</option> 
       <option value="website">website</option> 
       <option value="other">other</option> 
       </select> </div> 
      </td> 
     </tr> 
     <tr> 
      <td width="20%" align="left" valign="top"> 
      <label for="budget" class="lable">budget</label></td> 
      <td align="left" valign="top"> 
      <div class="selectBG"> 
       <span>please select...</span> <select name="budget" id="budget"> 
       <option value="please select..." selected="selected">please select... 
       </option> 
       <option value="100-500">$100-$500</option> 
       <option value="500-1,000">$500-$1,000</option> 
       <option value="1,000-2,000">$1,000-$2,000</option> 
       <option value="2,000-5,000">$2,000-$5,000</option> 
       <option value="5,000-10,000">$5,000-$10,000</option> 
       <option value="10,000+">$10,000+</option> 
       </select> </div> 
      </td> 
     </tr> 
     <tr> 
      <td width="20%" align="left" valign="top"> 
      <label for="timeframe" class="lable">timeframe</label></td> 
      <td align="left" valign="top"> 
      <div class="selectBG"> 
       <span>please select...</span> 
       <select name="timeframe" id="timeframe"> 
       <option value="please select..." selected="selected">please select... 
       </option> 
       <option value="asap">asap</option> 
       <option value="within 1 month">within 1 month</option> 
       <option value="within 2 months">within 2 months</option> 
       <option value="within 3 months">within 3 months</option> 
       <option value="within 6 months">within 6 months</option> 
       <option value="not sure">not sure</option> 
       </select> </div> 
      </td> 
     </tr> 
     <tr> 
      <td width="20%" align="left" valign="top"> 
      <label for="message" class="lable top">message<span class="red">*</span></label></td> 
      <td align="left" valign="top"> 
      <textarea name="message" id="message" cols="40" rows="5" class="textarea">what&#39;s on your mind?</textarea></td> 
     </tr> 
     <tr> 
      <td width="20%" align="left" valign="top"></td> 
      <td align="left" valign="top"> 
      <input type="reset" name="reset" id="reset" value="reset" class="btn" /> 
      <input name="submit" type="submit" class="btn" id="submit" onclick="MM_validateForm('name','','R','e-mail','','RisEmail','message','','R');return document.MM_returnValue" value="submit" /></td> 
     </tr> 
    </table> 
</form>

來源

2012-03-21 Stephen Martin

你必須垂直對齊：基線標籤的 - 即更改爲：頂部

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,  a, abbr, acronym, address, big, cite,  code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,  fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure,  figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { 
    border: 0 none; 
    margin: 0; 
    padding: 0; 
    vertical-align: baseline; 
}

，你也可以只做到：

td { vertical-align: top; }

來源

2012-03-21 02:41:05 vms

layout.css的基礎樣式是設置 vertical-align：基線

上的所有元素，添加一個類來設置它的頂部和使用類要對齊頂端

.form-label { 
    vertical-align: top; 
} 

<td class="form-label">

的所有標籤的TD，如果你真的要嵌入的風格做到這一點

<td width="20%" align="left" style="vertical-align: top;">

來源

2012-03-21 02:42:47 xkickflip

謝謝，這是一個非常好的建議。 – 2012-03-21 03:14:01

沒有問題，如果你全面改變它的所有TD，只要確保它不會在網站的其他地方造成不必要的副作用 – xkickflip 2012-03-21 03:42:29

您可以按照上述海報解釋的方式進行。 valign屬性已被棄用，以支持使用CSS來做到這一點。第二張海報描述瞭如何在標籤中而不是在樣式表中定義css。

來源

2012-03-21 03:57:53 eusid

valign =「top」在一個單元格中不起作用

回答

相關問題