使用图像或普通CSS的CSS分离器？

Question

分隔符图像不显示在输入字段的右侧。我尝试使用普通边框和不同的定位，以及我的示例中的图像，但它没有显示。

PS。这是分隔符图像：                        

jsfiddle

.ui-topbanner {
    color:#000;
    height: 31px;
    background-color: #f2e9da;
    border-bottom: 1px solid #d9cebc;
}
.ui-topbanner-title {
    position:absolute;
    top:5px;
    left:4px;
    height:26px;
    line-height:26px;
    padding:0 10px 0 25px;
    display:inline-block;
    color:#000;
    border:1px solid #d9cebc;
    border-bottom:none;
    background-color:#fff;
    font-size:.7rem;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    background-image: url(http://hardist.eu/public/img/icon_folderyellow3.gif);
    background-position: 5px 5px;
    background-repeat: no-repeat;

}
.ui-topsubbanner {
    position:relative;
    color:#000;
    height: 30px;
    background: -webkit-linear-gradient(top, #f7f1e8 0%, #f4ecdf 100%);
    border-top: 1px solid #fff;
    border-bottom: 1px solid #efe8da;
}
.ui-topsubbanner-wrapper {
    padding:2px 3px 0 5px;
}
.ui-seperator {
    width:2px;
    height:17px;
    display:inline-block;
    background-image: url(../images/ui-seperator.png);
    background-position: 0 6px;
    background-repeat: no-repeat;
}

<div class="ui-topbanner"><div class="ui-topbanner-title">Test</div></div>
<div class="ui-topsubbanner">

<div class="ui-topsubbanner-wrapper">
    <input type="text" class="input-search" placeholder="Search...">
</div>
<div class="ui-seperator"></div>

</div>

Answer 1

检查设置浮动属性。它可能对你有帮助。

.ui-topsubbanner-wrapper {
    padding:2px 3px 0 5px;
    float: left;
}
.ui-seperator {
    width:2px;
    height:17px;
    display:inline-block;
    background-image: url(http://i.imgur.com/ovVm6fW.png);
    background-position: 0 6px;
    background-repeat: no-repeat;
    float: left;
}

Answer 2

图像实际上存在，但很难看到，因为它的颜色与背景非常相似，而不是您所期望的。因为topsubbanner-wrapper div默认是一个块元素，所以分隔符会碰到下一行的开头。在我将分隔符div的背景更改为红色以进行诊断之前，我根本看不到它。

您可以通过将topsubbanner-wrapper div的显示设置为inline-block来解决问题，就像使用分隔符一样，或者将其float设置为left。