html - 产权分割线

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

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

只需将您的文本包装在具有白色背景的跨度中：

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

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

Answer 2

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

Answer 3

只需img在标题中添加标签并将文本与图像对齐

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