Règle horizontale / ligne sous chaque & lt; h1 & gt; en-tête en CSS

Je suis en train de placer un 100% de la ligne horizontale (règle automatiquement en dessous de chaque instance d'une

 <h1>

balise d'en-tête à l'aide de CSS.

Exemple de ce que j'aimerais voir:

--- snip 8< ---

Introduction

--- snip 8< ---

J'ai ceci dans mon CSS:

.mypage .headline {
    font-family: Calibri, "Helvetica", san-serif;
    line-height: 1.5em;
    color: black;
    font-size: 20px;
}

Et j'ai ceci dans ma page HTML principale:

<body class="mypage">
<h1><span class="headline">Introduction</span></h1>

Je ne peux pas comprendre comment avoir une ligne horizontale apparaît en dessous de chaque utilisation du titre de la classe.

source d'informationauteur user1527613

  1. 28

    Vous pouvez également essayer d'utiliser Pseudoclass :après. . J'ai utilisé ce genre de style dans une de mes applications.

    http://jsfiddle.net/ffmFQ/

    h1:after
{
    content:' ';
    display:block;
    border:2px solid black;
}

    Vous pouvez ranger peu plus de style à quelque chose comme ceci:- http://jsfiddle.net/5HQ7p/

    h1:after {
    content:' ';
    display:block;
    border:2px solid #d0d0d0;
    border-radius:4px;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
    -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
    -moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
}
  2. 8
    h1 { border-bottom: 1px solid black }

    Ajuster la taille et la couleur de préférence.

  3. 6

    Vous devez utiliser le border-bottom propriété CSS.

    Pour HTML, utilisez le code ci-dessous:

    <h1>Introduction</h1>

    Pour le CSS, utiliser le code ci-dessous:

    h1
{
    border-bottom:1px solid #CCC;
    padding-bottom:3px;
}

    Dans le cas où vous souhaitez utiliser le float:left, float:right propriétés, alors vous devez utiliser width:100% bien aussi. padding-bottom est pour éventuellement donner un peu d'espace entre le texte et la ligne horizontale.

    h1
{
    border-bottom:1px solid #CCC;
    float:left;
    width:100%;
    padding-bottom:3px;
}

    Code De Démo: http://jsfiddle.net/aASQe/

  4. 3

    border-bottom est ce que vous avez besoin... et de modifier la distance de la ligne de texte, utilisez padding-bottom.

  5. 1

    Pourquoi ne pas simplement utiliser border-bottom? Vous pouvez supprimer la durée de trop..

    HTML:

    <h1 class="headline">Introduction</h1>

    CSS:

    h1 {
  width:100%;
  border-bottom: solid 1px #666;
}
  6. -1

    Si vous vous sentez quelque chose va mal, vous pouvez utiliser zoom: 1;. Voir ce violon

    (J'ai enlevé les span mais vous pouvez définir une classe à votre balise h1.)

    CSS

    h1 {
    font-family: Calibri, "Helvetica", san-serif;
    line-height: 1.5em;
    color: black;
    font-size: 20px;
    border-bottom: 2px solid red;
    zoom: 1;
}

    HTML...

    <h1>Introduction</h1>