html - 使用 CSS 未获得预期效果

Question

我正在尝试使用 CSS(那个灰色的小条纹)获得这种效果:

但是，我所做的一切都不起作用。我的代码如下所示:

<header class="entry-header">
    <div class="entry-title">
        <h1>Contact</h1>
    </div>
    <div class="entry-float"></div>
</header><!-- .entry-header -->

我试过了 floating div.entry-title离开和padding div.entry-float , 改变了 div.entry-float至 <span> , 尝试在一个 div 上使用背景只是，这一切都没有成功。

这必须是 100% 灵活的，因为并非所有标题的宽度都相同。我宁愿完全避免使用 Javascript/jQuery。

有人可以帮忙吗？

Answer 1

我会用一个技巧来做到这一点，您可以将“线”作为 CSS3 伪元素与容器的中心对齐。然后给标题元素一个带有填充的背景颜色，并将其放在该行的顶部。这将允许可变长度的标题。

body{
    background:#FAFAFA;
}
.entry-title{
    position:relative;    
    margin:0 110px;
}
.entry-title:before{
    position:absolute;
    content:"";
    top:50%;
    background:#f7f7f7; /* line color */
    left:0;
    right:0;
    height:10px;
    margin:-5px 0 0; /* = half the height value */
}
h1{
    position: relative;
    color: #d9d9d9;
    padding:0 20px 0 0; /* increase this number to add more spacing to the right of your title before the line */
    background:#fafafa; /* same as background color of container element */
    display:inline-block;
}

JSFIDDLE DEMO