表td对齐问题？

Question

我正在尝试使按钮与文本框对齐，但我无法使其工作，如果您需要更多代码，我会很乐意发布它：）

这是我的代码：http://jsfiddle.net/Hunter4854/FFcAu/

<table class="chatMain" width="100%" height="100%" cellpadding="10" cellspacing="0" border="0">

    <tr>

        <td align="center" class="MainView" valign="middle">1</td>

        <td align="center" valign="middle" class="SideAd" width="185px" rowspan="3">AD</td>

    </tr>

    <tr>

        <td align="center" class="controls" valign="middle">

            <textarea class="chatInput"></textarea>

            <button type="submit">Send</button>

        </td>                                   

    </tr>

</table>

Answer 1

尝试将vertical-align: middle添加到表单元素中。

表格单元格的整个内容（作为一个实体）在单元格内垂直对齐，而内容中每个内联元素的相互对齐是通过这些内联元素的vertical-align指定的，而不是表格单元格。

Answer 2

将display: block和float: left添加到您的.chatInput和button课程中：

.chatInput
{
    display:block;
    float:left;
    width: 500px;
    font-size: 12pt;
    height: 75px;
    box-sizing: border-box;
    border: 1px solid #000;
    padding-left: 5px;
    padding-right: 5px;
    outline: none;
    resize:none;
}

button {
    display:block;
    float:left;
    height:75px;
}

小提琴：http://jsfiddle.net/kboucher/xH8sm/