下划线< h1>在div内 [英] Underline <h1> within a div

问题描述

我正在尝试在h1-标题下划线，但是由于某些原因，它总是占用父div的整个长度.我能够这样做的唯一方法是在CSS中添加position: absolute -property ...

I'm trying to underline a h1-title, but for some reason it always takes the whole length of the parent div. The only way I was able to do so, was by adding the position: absolute-property in the css...

这是设计:

This is the design:

这就是我得到的:

And this is what I get:

要获得的蓝线仅和h1一样宽，在父div下方得到一条灰色边框线.

Point is to get the blue line only as wide as the h1 and a gray border line under the parent 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的长度都将不同，在每个标题上添加固定宽度不是一种选择)，因此我正在寻找一种可靠的解决方案.有意见的人吗?

I'm planning on using the HTML across my whole website (each h1 will be different in length, adding a fixed width on each title isn't an option), so I'm looking for a robust solution. Anyone with advice?

推荐答案

您可以将h1更改为display: inline-block;

请参见以下在线示例(为清晰起见，在.title后面添加了margin-bottom):

See a live example at (added margin-bottom to .title for clarity):

http://jsfiddle.net/P4BGC/

这篇关于下划线< h1>在div内的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！