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 来解决此问题，就像您对分隔符所做的那样，或者将其浮动设置为左侧。

CSS 分隔符使用图像还是普通 css？

CSS seperator using image or plain css?

css

image

border

jsfiddle