javascript - 让 <div> 和 <a> 并排具有相同的高度

Question

所以我正在尝试向 select2 jquery 插件添加自定义样式，它是一个类似于多选择器插件的标签。 select2 呈现选定“标签”的方式指导我的 css 规则尝试和样式。 select2 呈现 <div>包含选定的标记文本，后跟 <a>如果用户需要，可以删除所选标签。

我希望关闭按钮和标签文本看起来像一个 block 。我几乎把它放在了我想要的地方，但你可以看到 <a>元素和 div元素的高度变化一两个像素。我想这可能是一个 display:inline 与 display:block 的问题，但我已经尝试将这两个元素都设置为 display:inline-block 没有运气，这是一个 jsfiddle，只需同时选择 option1 和 option2 来查看我的问题:

http://jsfiddle.net/QRNqm/

这是我的代码，记住我也在使用 select2 插件:

$(function(){
      $('#mdlTags').select2();
});


.select2-search-choice-close {
    padding: 2px 14px 3px 0;
    border-radius: 2px 2px 2px 2px;
    background: url(/images/projects/closeWhite.png) no-repeat 5px center #bdc6e5;
}
.select2-choices li div {
    border-radius: 2px 2px 2px 2px;
    color: #fff !important;
    text-decoration: none;
    padding: 3px 14px 3px 12px;
    background-color: #bdc6e5;
}

 <select multiple="multiple" id="mdlTags" class="skipMsDropdown" style="width:330px;">
     <option value="1" >Option 1</option>
     <option value="2" >Option 2</option>
</select>

Answer 1

将 .select2-search-choice-close 类替换为以下内容:

.select2-search-choice-close {
    padding: 2px 14px 3px 0;
    border-radius: 2px 2px 2px 2px;
    background: url(/images/projects/closeWhite.png) no-repeat 5px center #bdc6e5;
    height: 14px; /* given height (actual 13px and 1px to adjust bottom margins) to adjust line-height of parent element */
    margin-top: -1px; /* to adjust top margins to get in proper line */
}

这是一个有效的 DEMO .