为什么vertical-align会偏移此内联级别框？

Question

以下HTML导致文本元素偏离submit元素：

<span style="display: inline-block">
  <input style="vertical-align: top;" type="text">
</span>
<input type="submit" value="Submit">

如果我删除了vertical-align属性，它们会相应排列。我希望使用“top”值将输入与封闭行框的顶部对齐，但它似乎是用“提交”文本排列，这会导致意外的偏移。

请注意，这是一个人为的例子。这是我将Twitter的typeahead.js库应用到我的页面时所得到的简化情况，并注意到对齐被破坏了。

谢谢！

Answer 1

<span style="display: inline-block">

http://jsfiddle.net/pellmellism/3eRVH/

跨越两个表单元素，对齐将自行运行