Question

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

我希望关闭btn和标签文本看起来像一个块。我几乎在我想要的地方，但你可以看到<a>元素和div元素的高度相差一两个像素。我想也许这是一个显示：内联与显示：块问题，但我已经尝试设置要显示的两个元素：内联块没有运气，这里是一个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

它现在处于同一水平。这是编辑过的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;
}

Answer 2

将.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。

Answer 3

首先，select2-search-choice-close样式的顶部填充像素少一个。但即使你解决了这个问题，两个元素之间仍然存在差异。

如果您看一下demo on the Select2 page，那就是它出现的方式（两个元素之间有一个垂直像素差异）。不同之处在于它们在包含这两个元素的容器上应用统一样式，而不是分别为这些元素设置样式。

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

获取<div>和<a> to be the same height side by side</a> </div>

3 个答案: