Valign = "top" не работает в одной ячейке

У меня установлена таблица, где в левом столбце задано значение valign = "top". Он работает во всех ячейках, за исключением последнего. Я не применяю какие-либо классы к этой ячейке, поэтому я действительно смущен.

Мой демонстрационный сайт находится здесь. Проблема связана с ячейкой, содержащей слово "сообщение *" в нижней части страницы.

Вот HTML:

<form action="form.php" method="post" id="contact"> <table border="0" cellspacing="0"> <tbody><tr> <td valign="top"> <label for="name">name<span>*</span></label></td> <td valign="top"> </td> </tr> <tr> <td valign="top"> <label for="email">e-mail<span>*</span></label></td> <td valign="top"> </td> </tr> <tr> <td valign="top"> <label for="project">project</label></td> <td valign="top"> <div> <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 valign="top"> <label for="budget">budget</label></td> <td valign="top"> <div> <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 valign="top"> <label for="timeframe">timeframe</label></td> <td valign="top"> <div> <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 valign="top"> <label for="message">message<span>*</span></label></td> <td valign="top"> <textarea name="message" id="message" cols="40" rows="5">what's on your mind?</textarea></td> </tr> <tr> <td valign="top"> </td> </tr> </tbody></table>
</form>
3 ответа

У вас есть вертикальная выровненность: базовая линия для метки - измените ее на: 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; }


Вы можете сделать это в любом случае, описанные выше плакаты. Атрибут valign устарел в пользу использования css для этого. Второй плакат описывает, как определить css в теге, а не в таблице стилей.


Базовый стиль от layout.css устанавливает вертикальное выравнивание: базовая линия

на всех элементах добавьте класс, чтобы установить его в начало и использовать этот класс для всех ярлыков TD, которые вы хотите выровнять в верхней части

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

если вы действительно хотите вставить стиль, сделайте это

licensed under cc by-sa 3.0 with attribution.