CSS pour aligner l'étiquette et l'entrée

Question

Extrait de code HTML :

<fieldset id="o-bs-sum-buginfo">
  <label for="o-bs-sum-bug-ErrorPrefix">Error Prefix</label>
  <input type="text" id="o-bs-sum-bug-ErrorPrefix" name="ErrorPrefix" value="" />

  <label for="o-bs-sum-bug-ErrorNumber">Error Number</label>
  <input type="text" id="o-bs-sum-bug-ErrorNumber" name="ErrorNumber" value="" />
  ....
</fieldset>

En utilisant uniquement CSS (ou jquery), indépendamment de la taille du navigateur, je veux jumeler des éléments d'étiquette et de saisie l'un à côté de l'autre. J'ai également la possibilité de modifier le HTML, si nécessaire.

Answer 1

C'est l'une des choses qui peut être étonnamment délicate à réaliser.

De nombreuses personnes suggèrent d'utiliser float:left; pour ça. Personnellement, je n'aime vraiment pas les flotteurs ; ils semblent causer plus de problèmes qu'ils n'en résolvent.

Ma préférence va à l'utilisation de l'inline-block. Il s'agit d'une méthode d'affichage qui combine des propriétés en ligne (afin de pouvoir aligner facilement des éléments les uns à côté des autres, etc.) et des propriétés de bloc (comme la possibilité de spécifier des dimensions).

Donc la réponse est simplement de les rendre tous les deux display:inline-block; et donner aux invites une largeur fixe, ce qui permettra d'aligner les champs de saisie à côté d'elles.

Vous aurez également besoin d'une sorte de saut de ligne après le champ de saisie, sinon l'invite suivante apparaîtra sur la même ligne, ce qui n'est pas l'effet recherché. La meilleure façon d'y parvenir est de placer chaque invite et son champ dans un conteneur. <div> .

Votre HTML ressemblera donc à ceci :

<fieldset id="o-bs-sum-buginfo" class="myfields">
  <div>
    <label for="o-bs-sum-bug-ErrorPrefix">Error Prefix</label>
    <input type="text" id="o-bs-sum-bug-ErrorPrefix" name="ErrorPrefix" value="" />
  </div>

  <div>
    <label for="o-bs-sum-bug-ErrorNumber">Error Number</label>
    <input type="text" id="o-bs-sum-bug-ErrorNumber" name="ErrorNumber" value="" />
  </div>
  ....
</fieldset>

et votre CSS ressemblera à ceci :

.myfields label, .myfields input {
  display:inline-block;
}

.myfields label {
  width:200px; /* or whatever size you want them */
}

J'espère que cela vous aidera.

Editar : vous pouvez utiliser ce plugin pour définir la largeur de chaque étiquette :

jQuery.fn.autoWidth = function(options) 
{ 
  var settings = { 
        limitWidth   : false 
  } 

  if(options) { 
        jQuery.extend(settings, options); 
    }; 

    var maxWidth = 0; 

  this.each(function(){ 
        if ($(this).width() > maxWidth){ 
          if(settings.limitWidth && maxWidth >= settings.limitWidth) { 
            maxWidth = settings.limitWidth; 
          } else { 
            maxWidth = $(this).width(); 
          } 
        } 
  });   

  this.width(maxWidth); 
}

de cette page dans un commentaire

et vous l'utilisez de cette façon :

$("div.myfields div label").autoWidth();

et c'est tout... toutes vos étiquettes vont prendre la largeur de l'étiquette la plus longue

Answer 2

#o-bs-sum-buginfo label, #o-bs-sum-buginfo input{display:inline-block;width:50%;}

Answer 3

Placez chaque étiquette avec son entrée correspondante dans une étiquette p. Ajoutez ensuite la css suivante :

label{
  float:left;
  width:100px; //whatever width that suits your needs
}

p{
    margin:10px 0; //manipulate the vertical spaces for each input..  
}

<fieldset id="o-bs-sum-buginfo">
  <p>
    <label for="o-bs-sum-bug-ErrorPrefix">Error Prefix</label>
    <input type="text" id="o-bs-sum-bug-ErrorPrefix" name="ErrorPrefix" value="" />
  </p>
</fieldset>

Answer 4

Je pense qu'utiliser javascript pour une simple astuce css est exagéré. Voici celui que je viens de faire : http://jsfiddle.net/t6R93/

div{
  display: table-row;
}
label,input{
  display:table-cell;
}

PS : Il peut avoir des défauts avec d'autres navigateurs. Je n'ai testé qu'avec Chrome.

Answer 5

J'étais curieux de voir si cela pouvait être fait avec le balisage sémantique "naturel", c'est-à-dire sans éléments d'habillage non sémantiques et avec la balise label contenant son correspondant input plutôt que de devoir s'y référer avec l'appellation un peu maladroite de for attribut :

<fieldset>
  <label>Error Prefix<input/></label>
  <label>Error Number<input/></label>
</fieldset>

Une étiquette à largeur fixe n'alignera pas les entrées ici parce que le texte n'est pas un élément séparé, et la solution élégante et minimale de Shahid ne fonctionne pas non plus, mais si vous êtes prêt à faire en sorte que toutes les entrées aient la même largeur (ce qui, à mon avis, est agréable de toute façon) vous pouvez float les right :

label { display:block; margin:8px; width:360px; clear:right; overflow:auto; }
input, button, textarea, select { box-sizing:border-box; -moz-box-sizing:border-box; width:200px; float:right; }

El -moz-box-sizing devraient être redondants lorsque le FF29 sera publié, et même les box-sizing n'est pas nécessaire, sauf si vous mélangez les types de contrôle de formulaire. Le site clear y overflow sont spécifiquement nécessaires pour textarea .

Exemple complet de type à entrée mixte :

<!DOCTYPE html>
<html>
  <head>
    <title>Aligned labels</title>
    <style>
      label { display:block; margin:8px; width:360px; clear:right; overflow:auto; }
      input, button, textarea, select { box-sizing:border-box; -moz-box-sizing:border-box; width:200px; float:right; }
    </style>
  </head>
  <body>
    <label>Name<input type="text" value="Sir Galahad of Camelot"/></label>
    <label>Quest<textarea>I seek the Holy Grail</textarea></label>
    <label>Favourite Colour<select><option>Blue</option><option>Yellow</option></select></label>
    <label>If you're sure...<button>Give Answers</button></label>
  </body>
</html>