html - 如何将 jQuery UI 按钮水平对齐到 div？

Question

我有以下 HTML 结构(这个结构对我很重要):

<div>
    <div class="element">
        <div contenteditable="true" class="inputdiv"></div>
    </div>
    <div class="element" id="zbtn">OK</div>
</div>

和 CSS:

.inputdiv {
    width: 100px;
    height: 16px;
    overflow: hidden;
    padding: 3px 3px 2px;
    white-space: nowrap;
    border: 1px solid #aaa;
    border-radius: 2px;
}
.element {
    font-size: 11px;
    font-family: Helvetica,Arial;
    display: inline-block;
}

我从 DIV 创建一个简单的 jQuery UI 按钮(这也很重要):

$('#zbtn').button();

按钮通常在 Chrome 中对齐，但在 Firefox 和 IE 中则不然。

请看图片:

和 jsFiddle:

http://jsfiddle.net/Grigur/SPLLW/

Answer 1

将 vertical-align:middle 添加到 .element，更新了 fiddle http://jsfiddle.net/SPLLW/1/