HTML：为什么按钮元素总是略微低于其他元素？

Question

我注意到HTML中的<button>元素总是略低于其他元素，如下图所示。

正如您所看到的，＆＃34; Go＆＃34;按钮略小于同一行上的textarea元素。这个代码如下......

<table width="100%">
            <tr>
                <th rowspan="2" align="left">
                    <img width="120px" height="60px" src="test-image.jpg" />
                </th>
                <th align="right">
                    User &nbsp;&nbsp;
                    <a href="">My Garage</a> &nbsp;|&nbsp;
                    <a href="">Account Settings</a>&nbsp;|&nbsp;
                    <a href="">Sign Out</a> &nbsp;|&nbsp;
                    <br/>
                    <textarea rows="1" id="search_text"></textarea><button>Go!</button>
                </th>
            </tr>
        </table>

为什么会发生这种情况？对此最简单的解决办法是什么？

Answer 1

尝试将vertical-align: text-bottom;应用于您的按钮。

Answer 2

您应该使用input标记，而不是单行textarea。试试这段代码：

<input type="text" id="search_text"><button>Go!</button>​​​​​​​​​​​​​​​​​​​​​​