没有得到与CSS

我试图让与CSS这样的效果（即小灰边线啄）想要的效果：没有得到与CSS

enter image description here

然而，没有什么的，我做的是什么工作。我的代码如下所示：

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

我已经试过floatingdiv.entry-title左，paddingdiv.entry-float，改变div.entry-float到<span>，使用上只有一个div背景试过，所有失败的它。

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

有人可以协助吗？

来源

2014-09-04 Albert

将您的标题换成2行吗？ – haxxxton 2014-09-04 06:02:46

@haxxxton，它永远不会换行到2行。 – Albert 2014-09-04 06:07:24

有各种各样的方式来实现这一目标，其中之一是增加伪元素头，完全根据需要将它定位并隐藏其他与overflow: hidden：

<h1>Content</h1>

h1 { 
    text-transform: uppercase; 
    font-size: 1em; 
    color: grey; 
    position: relative; 
    overflow: hidden; 
} 

h1:after { 
    content: ""; 
    display: inline-block; 
    height: 4px; 
    width: 100%; 
    background: grey; 
    position: absolute; 
    top: 8px; 
    margin-left: 10px; 
}

JSBin。

来源

2014-09-04 06:09:34

完美，正是我想要它。谢谢。 – Albert 2014-09-04 07:52:50

我会这样做，你把“线”作为一个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

来源

2014-09-04 06:08:09 haxxxton

谢谢。我接受了Klaster_1的答案，因为它的代码更少，更清洁，但您的解决方案也可行。 – Albert 2014-09-04 07:53:50

@DarkRanger多数民众赞成在多数“额外的代码”被添加到保持风格与你提供的图形一致:) – haxxxton 2014-09-04 07:57:11

没有得到与CSS

回答

相关问题