让 <div> 和 <a> 并排具有相同的高度答案

【问题标题】：Getting a <div> and <a> to be the same height side by side让 <div> 和 <a> 并排具有相同的高度
【发布时间】：2014-02-08 12:24:03
【问题描述】：

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

我希望关闭 btn 和标签文本看起来像一个块。我几乎在我想要的地方都有它，但你可以看到<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>

【问题讨论】：

您尝试过添加负边距顶部吗？

标签： javascript jquery html css

【解决方案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。

【讨论】：

【解决方案2】：

现在处于同一水平。这是编辑后的 css。

.select2-search-choice-close {
    background: url("/images/projects/closeWhite.png") no-repeat scroll 5px center #BDC6E5;
    border-radius: 2px;
    padding: 3px 14px 3px 0;  // increase the top padding for 1 point.
}

.select2-search-choice-close {
    background: url("select2.png") no-repeat scroll right top rgba(0, 0, 0, 0);
    display: block;
    font-size: 1px;
    height: 13px;
    outline: medium none;
    position: absolute;
    right: 3px; // Reduce the top position for 1 point
    top: 3px;
    width: 12px;
}

【讨论】：

【解决方案3】：

首先，select2-search-choice-close 样式的顶部填充像素减少了一个。但是即使你修复了这个问题，这两个元素之间仍然会有一个像素的差异。

如果你看一下demo on the Select2 page，它也是这样出现的（两个元素之间有一个垂直像素差）。不同之处在于他们在包含这两个元素的容器上应用统一样式，而不是单独设置每个元素的样式。

如果您进行这两项更改，您最终会得到如下结果： http://jsfiddle.net/Cv6cH/

【讨论】：