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

您有纵向对齐：标签的基线 - 将其更改为：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的基本样式是设置 vertical-align：base-line

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

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

<td class="form-label">

如果你真的想要嵌入风格，请执行此操作

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

Answer 3

你可以按上述海报解释的方式进行。 valign属性已被弃用，支持使用css来执行此操作。第二张海报描述了如何在标签中而不是在样式表上定义css。

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

3 个答案: