web-dev-qa-db-fra.com

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

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), quelle que soit la taille du navigateur, je souhaite associer des éléments d'étiquette et des éléments d'entrée côte à côte. J'ai aussi la liberté de changer Tweak the HTML. si nécessaire.

jqueryhtmlcssinputlabels
39
hashg

C'est l'une de ces choses qui peuvent être étonnamment difficiles à résoudre.

Beaucoup de gens suggéreront d'utiliser float:left; pour cela. 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 est d'utiliser inline-block. Il s'agit d'une méthode d'affichage qui combine des propriétés en ligne (vous pouvez ainsi facilement aligner des éléments les uns à côté des autres, etc.) avec des propriétés de bloc (telles que la possibilité de spécifier des dimensions).

La solution consiste donc simplement à les associer à display:inline-block; et à attribuer aux invites une largeur fixe, ce qui alignera les champs de saisie les plus proches.

Vous aurez également besoin d'une sorte de saut de ligne ou de pause après le champ de saisie, sinon l'invite suivante apparaîtra sur la même ligne, ce qui ne correspond pas à l'effet souhaité. Le meilleur moyen d'y parvenir est de placer chaque invite et son champ dans un conteneur <div>.

Donc, votre code HTML ressemblera à 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 pourra aider.

Edit: 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 la plus longue étiquette

84
Spudley

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

10
Shahid

Il n'est pas nécessaire d'utiliser JavaScript, jQuery ou divs supplémentaire. Vous devez juste:

  • Faites flotter input et label à gauche (notez que input doit être bloqué pour pouvoir être flotté).
  • Ajoutez clear: both à label.
  • Définissez largeur fixe (par exemple 100px) sur label.

input {
  display: block;
  float: left;
}
label {
  float: left;
  clear: both;
  width: 100px;
}
<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>

1
Michał Perłakowski

Placez chaque étiquette avec son entrée correspondante dans une balise p. Ajoutez ensuite le css suivant:

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>
1
amosrivera

Je pense que l’utilisation de javascript pour une simple astuce css est excessive . Voici celui que j’ai réalisé tout à l’heure: http://jsfiddle.net/t6R93/

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

PS: Il peut y avoir des failles avec d'autres navigateurs. J'ai seulement testé avec Chrome.

1
egiray

J'étais curieux de voir si cela pourrait être fait avec le balisage sémantique "naturel", c'est-à-dire sans aucun élément d'encapsulation non sémantique et avec la variable label contenant sa input correspondante plutôt que de devoir y faire référence avec l'attribut for légèrement maladroit:

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

Une étiquette à largeur fixe n'alignera pas les entrées ici car le texte n'est pas un élément séparé et la solution élégamment minimale de Shahid ne fonctionne pas non plus, mais si vous voulez faire en sorte que toutes les entrées aient la même largeur (à mon humble avis, Nice quand même) vous pouvez float leur 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; }

Le -moz-box-sizing devrait être redondant lorsque FF29 est publié, et même le box-sizing n'est pas nécessaire, sauf si vous mélangez des types de contrôle de formulaire. Les clear et 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>
0
mrec