如何将文本输入框与图像按钮对齐？

Question

我有一个表单，最后一行的输入字段后面跟着两个图片按钮。

无论我尝试什么，似乎都无法使按钮与字段水平对齐。

以下是所有代码： http://jsfiddle.net/h3ZPk/

- TheOne

Answer 1

添加这个规则：

#buttons img, #buttons input {
    vertical-align:bottom;
}

jsFiddle示例。

- j08691

---

如果@Ramin想知道这是如何工作的，那是因为<input>有5px的基线而<img>没有，所以最简单的方法是将它们对齐到底部，尽管顶部也可能有效。 - Neil

Answer 2

我不经常推荐这样做，但请使用表格。虽然它们有点老式，但对于表单来说非常有效。

<table>
  <tr>
    <td>Label1</td><td><input type="text" /></td><td></td><td></td>
  </tr>
  <tr>
    <td>Label2</td><td><input type="text" /></td><td></td><td></td>
  </tr>
  <tr>
    <td>Label3</td><td><input type="text" /></td><td><input type="button" /></td><td><input type="button" /></td>
  </tr>
</table>

---

EDIT:

http://jsfiddle.net/h3ZPk/6/

- Hidde

---

嗯，在CSS3时代，我不会这么说，但是就表单而言，它们已经非常接近了！ - Hidde

A) 这不是表格数据。 B) 只需使用 CSS 就可以完成。 - j08691

可以做到，但我认为这很混乱，并且需要大量的代码来完成一些非常简单的事情：一个表格！ - Hidde

@j08691：使用表格牺牲了哪些东西？最重要的是最终结果。 - TheOne

还有一个小提示，表格与宇宙中存在的每个简单愚蠢的过时浏览器兼容。有时这很重要。 - Hidde