valign="top" 在一个单元格中不起作用

Question

我设置了一个表格，其中左列设置为 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>

Answer 1

你有 vertical-align: label 的基线 -- 把它改成 :top

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; }

Answer 2

layout.css 中的基本样式正在设置 垂直对齐：基线

在所有元素上，添加一个类以将其设置为顶部，并将该类用于要对齐到顶部的所有标签 TD

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

<td class="form-label">

如果您真的想嵌入样式，请这样做

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

Answer 3

您可以按照上述海报的说明进行操作。 valign 属性已被弃用，取而代之的是使用 css 来执行此操作。第二张海报描述了如何在标签中而不是在样式表中定义 css。