Soulignons <h1> à l'intérieur d'un div

J'essaie de souligner un h1-titre, mais pour une raison quelconque, il prend toujours la totalité de la longueur de la div parent. La seule façon que j'ai été en mesure de le faire est par l'adjonction de la position: absolute-propriété dans le css...

C'est la conception:

Soulignons <h1> à l'intérieur d'un div

Et c'est ce que j'obtiens:

Soulignons <h1> à l'intérieur d'un div

Point est d'obtenir la ligne bleue aussi large que le h1 et une bordure grise en ligne sous le div parent.

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;
}

Je suis la planification sur l'utilisation de l'HTML sur mon site web dans son ensemble (chaque h1 sera différent dans la longueur, l'ajout d'une largeur fixe sur chaque titre, n'est pas une option), donc je suis à la recherche d'une solution solide. Quelqu'un à des conseils?

<h1> est un élément de bloc, et va s'étaler sur la largeur de son parent. C'est pourquoi votre soulignent passe à travers l'écran de la h1 est très large, même si le texte ne l'est pas.

OriginalL'auteur Michiel | 2012-07-25

  1. 13

    Vous pouvez modifier h1 à display: inline-block;

    Voir un exemple à l' (ajouté margin-bottom à .title pour plus de clarté):

    http://jsfiddle.net/P4BGC/

    Génial! Merci!

    OriginalL'auteur Jon Newmuis

  2. 1

    Voir ce violon. H1 est un élément de bloc, de sorte qu'il grandit à remplir son parent. Vous pouvez définir display: inline, mais je suggère également de le mettre dans son propre div (ou de tout autre élément avec display: block) afin de vous assurer que le contenu ne passe à côté de vous.

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

    le css

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

    OriginalL'auteur Raffaele