在div中加下划线<h1>

Question

我试图强调h1-title,但由于某种原因,它总是占用父div的整个长度.我能够这样做的唯一方法是position: absolute在CSS中添加-property ...

这是设计:

这就是我得到的:

要点是使蓝线仅h1与父div下的灰色边框线一样宽.

HTML:

<div class="title">
    <h1>Contacteer ons</h1>
</div>

CSS:

h1 {
    border-bottom: 8px solid #57c4d0;
    position: absolute; /* As I've said, adding this allowed me to do so, but the result was far from ideal! */
}

.title {
    border-bottom: 1px solid #dedede;
}

我打算在我的整个网站上使用HTML(每个都有h1不同的长度,在每个标题上添加固定宽度不是一个选项),所以我正在寻找一个强大的解决方案.有建议的人吗？

Answer 1

你可以h1改为display: inline-block;

见(增加了一个活生生的例子margin-bottom来.title为清楚起见):

http://jsfiddle.net/P4BGC/