Réglage de la hauteur de la ligne d'éléments de l'étiquette dans les formulaires HTML

J'ai un formulaire avec un emballage <label> élément, mais l'espace entre les <label>'s deux lignes est trop gros et je n'arrive pas à régler la hauteur de la ligne de la <label>.

Voici un exemple d'un <label> et un <p>, les deux avec la même feuille de style CSS appliquée. Comme vous pouvez le voir, le <p> s'ajuste correctement, tandis que le <label> reste inchangé.

http://jsfiddle.net/QYzPa/

CODE:

CSS:

form label,
form p
{    
  font-weight:bold;
  line-height:.7em;
}

HTML:

<form style="width:200px;">
    <fieldset>
         <label for="textarea">In ten or fewer words, explain American history</label>
        <p>In ten or fewer words, explain American history</p>
        <textarea name="textarea" rows="5" ></textarea>
    </fieldset>
</form>

InformationsquelleAutor Yarin | 2011-06-05
  1. 42

    Toutes les balises HTML sont classés dans des catégories qui décrivent leur nature. Cette classification peut être liée à la sémantique, le comportement, l'interaction et de nombreux autres aspects.

    Les deux p et label balises sont classés dans le "flux de contenu" tags catégorie. Mais il y a une légère différence entre: le label balise est également classé dans une catégorie appelée "formulation de contenu".

    Ce faire tout ce que cela signifie dans la pratique? Le navigateur par défaut rendu suivra l'étiquette spécifiée classifications et permettra de traiter les p balise comme un élément de bloc, tandis que le label balise, par défaut, être traitée comme un élément. Vous pouvez modifier cela en remplacement de la CSS par défaut de la règle: il suffit de dire au navigateur que vous voulez que votre label être affiché comme un élément de bloc.

    label {
  display: block;
}

    Vous avez besoin de le faire parce que les éléments qui sont en ligne (display:inline) ne peut pas avoir des propriétés comme height, line-height, margin-top, margin-bottom (ils seront ignorés).

    Si vous souhaitez qu'un élément inline pour avoir une hauteur de propriété, mais encore de le garder avec elle inline comportement (sans provoquer un SAUT de LIGNE), vous pouvez la déclarer comme:

    label{
 display:inline-block;
}

    Il est toujours bon de prendre une lecture à l'HTML de la documentation. Voici un joli graphique montrant les catégories, il peut vous faire économiser beaucoup de temps, spécialement lorsque vous traitez avec ces petites manies.

    • Façon à mettre en arrière - display:block; est en effet la question - merci
    InformationsquelleAutor marcio
  2. 3

    Je pense que ce qui est Marcio essaie de dire, c'est que dans inline éléments (comme spans ou labels), qui peut résider l'un après l'autre dans le texte, vous ne pouvez pas spécifier des attributs qui s'appliquent à l'ensemble du paragraphe.

    Le plus évident est l' text-align: ce paragraphe doit préciser les aligner et non de la personne spans. Afin line-height et ces.

    À l'opposé de la inline les éléments sont les block éléments comme div ou p qui occupent une place sur une page et sont disposés entre les uns des autres sur un niveau supérieur au niveau du bloc. Ce comportement est contrôlé par l'attribut CSS display avec ce qui peut rendre div se comportent comme des span et vice versa.

    InformationsquelleAutor Gman
  3. 1

    Pas entièrement sûr de savoir pourquoi, mais il ne fonctionnera que si vous définissez display: block; sur l'étiquette

    InformationsquelleAutor Fredrik