为什么垂直对齐偏移此行内级框？

Question

以下HTML导致文本元素从提交元件偏移：

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

如果删除了垂直对齐属性，它们适当地排队。我期望值“顶部”将输入与封闭线框的顶部对齐，但它似乎与“提交”文本排列在一起，这会导致意外偏移。

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

谢谢！

Answer 1

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

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

跨度都表单元素和校准将工作本身出