css - 强调

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/

Answer 2

看到这个小提琴。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;
    }