在div </h1>中加下划线<h1>

Question

我试图强调h1 - 标题，但由于某种原因，它总是需要父div的整个长度。我能够这样做的唯一方法是在css中添加position: absolute - 属性...

这是设计：

这就是我得到的：

要点是使蓝线仅与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/

Answer 2

见this fiddle。 H1是一个块元素，因此它会增长以填充其父元素。您可以设置display: inline，但我也建议将其放在自己的div（或display: block中的任何其他元素）中，以确保没有任何内容出现。

<div><h1>Hello, world</h1></div>
Lorem ipsum

css

​h1 {
  border-bottom: 3px solid red;
  display: inline;
}​

Answer 3

您还可以使用CSS样式text-decoration。

html：

<div><h1>Hello, world</h1></div>

css：

    h1 {
        text-decoration: underline;
    }