html - HTML：为什么一个按钮元素总是出现在其他元素的下方？

Question

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

如您所见，“Go”按钮略低于与它位于同一行的 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>​​​​​​​​​​​​​​​​​​​​​​