在表格中显示内联的文本和图像输入

Question

您好我想在表格中显示文本和图像输入，如下所示：

我试过这段代码：

<tbody>
            <tr>
                <td class="inputs">
                    <input type="text" id="input1" size="3"/>
                </td>
                <td class="inputs">
                    <input type="text" id="input2" />
                </td>
                <td class="inputs">
                    <input type="text" id="input3" size="10"/>
                </td>
                <td class="inputs">
                    <input type="text" id="input4" size="8"/>
                    <input type="image" src="button.png" />
                </td>
                <td class="inputs">
                    <input type="text" id="input5" size="10"/>
                </td>
                <td class="inputs">
                    <input type="checkbox" id="input6" />
                </td>
            </tr>

但结果如下：

任何想法如何解决这个问题？请帮忙！

Answer 1

垂直对齐是这里的问题。只需在表格单元格中的vertical-align: top元素上指定input，它们都将对齐到相同的位置（在这种情况下为顶部）：

td input {
  vertical-align: top;
}