所有权上的分隔线

Question

我想在页面的部分标题右侧放置一个分隔符，如下所示：

我试着这段代码，但是它是这样的：

这是代码：

<h4 class="section-title">Lastest From Blog</h4>

.section-title {
    font-size:18px;
    background-image: url('images/divider-bar.png');
    background-repeat: repeat-x;
    padding-bottom: 12px;
    color: #6c6c6c;
}

这是小提琴： http : //jsfiddle.net/Chead/hrYyg/

Answer 1

只需在标题中放置一个img标签，然后将文本与图像对齐

<h4 class="section-title">Lastest From Blog <img src="images/divider-bar.png" /></h4>

Answer 2

你去了： http : //jsfiddle.net/KQdcr/

只需将您的文本换成带有白色背景的范围即可：

.section-title span { background: white; padding-right: 3px; }

当然，如果页面的背景不是纯色，这将不起作用。

Answer 3

在这里，你go 试试看。 调整容器和分隔线的宽度