在文本上方添加一行

Question

我试图在某些文字上添加一条线。

这就是我想要的

这就是我到目前为止所得到的

这就是我在申请中的内容

<div class="zoekResultatLine">
    <h2 class="zoekResultat">ZOEKRESULTAAT</h2> 
</div>


.zoekResultatLine
{     
     text-decoration:overline;
     color : rgb(217, 217, 217);
}

.zoekResultat
{
    color : rgb(0, 158, 224);
}

Answer 1

给它border-top并与padding-top一起玩，以使其正确：

.zoekResultatLine {
    border-top:1px solid rgb(217, 217, 217);
}
.zoekResultat {
    color : rgb(0, 158, 224);
    margin-top: 0px;
}

Fiddle

Answer 2

HTML：

<div class="zoekResultatLine">
     <h2 class="zoekResultat">ZOEKRESULTAAT</h2>
</div>

<强> CSS：

.zoekResultatLine{     
    display: block;
}

.zoekResultat{
    color : rgb(0, 158, 224);
    border-top: 1px solid #888;
}

演示： http://jsfiddle.net/Smartik/ndbyc7dp/

Answer 3

这是一种解决方法，但你可以创建一个div作为一行：

<div class="line"></div>

div.line
{
    height: 1px;
    width: 100%;
    background-color: #000;
}

这种方法的优点是您可以轻松修改线条的宽度，高度和颜色，甚至可以将背景更改为图像，添加边距等。

Answer 4

正如其他人所说，你可以使用<hr/>元素。

您可以使用CSS设置样式 - 请参阅http://css-tricks.com/examples/hrs/