我正在尝试下划线h1-title，但由于某种原因它总是占用父 div 的整个长度。我能够做到这一点的唯一方法是添加position: absolute-CSS 中的属性...

This is the design:

And this is what I get:

重点是让蓝线的宽度与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长度会有所不同，在每个标题上添加固定宽度不是一个选项），所以我正在寻找一个强大的解决方案。有人有建议吗？

你可以改变h1 to display: inline-block;

请参阅以下位置的实例（已添加margin-bottom to .title为了清楚起见）：

http://jsfiddle.net/P4BGC/ http://jsfiddle.net/P4BGC/