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 seulement CSS (ou jquery), indépendamment de la taille du navigateur, je veux jumeler des éléments d'étiquette et d'entrée l'un à côté de l'autre. J'ai aussi la liberté de modifier le code HTML. si nécessaire.

39
demandé sur hashg 2011-01-09 22:46:50

6 réponses

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

beaucoup de gens suggéreront d'utiliser float:left; pour cela. Personnellement, je n'aime pas vraiment 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 (de sorte que vous pouvez facilement aligner des éléments à côté de l'autre, etc) avec des propriétés de bloc (comme pouvoir spécifier des dimensions).

Donc la la réponse est simplement de les faire tous les deux display:inline-block; et donnez aux invites une largeur fixe, ce qui alignera les champs d'entrée à côté d'eux.

vous aurez aussi besoin d'une sorte d'alimentation en ligne ou de rupture après le champ d'entrée, sinon l'invite suivante apparaîtra sur la même ligne, ce qui n'est pas l'effet désiré. La meilleure façon d'y parvenir est de mettre chaque invite et son champ dans un conteneur <div>.

ainsi votre 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 vous aide.

Modifier: 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); 
}

à partir de cette page dans un commentaire

et vous utiliser 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
répondu Spudley 2011-06-06 12:02:16

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

10
répondu Shahid 2011-01-09 19:58:30

Mettez chaque étiquette avec son entrée correspondante dans une étiquette p. Puis Ajouter les css suivants:

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
répondu amosrivera 2011-01-09 19:56:33

je pense qu'utiliser javascript pour un simple truc css est exagéré. Voici celui que j'ai fait tout à l'heure: http://jsfiddle.net/t6R93/

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

PS: il peut avoir des défauts avec d'autres navigateurs. J'ai seulement testé avec du Chrome.

1
répondu egiray 2013-11-15 18:32:55

il n'est pas nécessaire D'utiliser JavaScript, jQuery, ou divs. Il suffit de faire:

  • Float input et label à gauche (notez que input doit être bloqué pour être flotté).
  • Ajouter clear: bothlabel.
  • Définir une largeur fixe (par exemple,100px)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
répondu Michał Perłakowski 2016-01-07 21:14:29

j'étais curieux de voir si cela pouvait être fait avec le balisage sémantique "naturel", c.-à-d. sans éléments d'enveloppe non sémantique et avec le label contenant soninput plutôt que d'avoir à en référer à elle légèrement maladroit for l'attribut:

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

une étiquette de largeur fixe n'alignera pas les entrées ici parce que le texte n'est pas un élément séparé, et la solution minimale élégante de Shahid ne fonctionne pas non plus, mais si vous êtes prêt à faire toutes les entrées même largeur (qui IMHO regarde beau de toute façon) vous pouvez floatright:

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

-moz-box-sizing devrait être redondant lorsque FF29 est libéré, et même le box-sizing n'est pas nécessaire sauf si vous mélangez des types de contrôle de forme. clear et overflow sont spécifiquement nécessaires pour textarea.

Complet mixte-type d'entrée exemple:

<!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
répondu mrec 2014-04-03 17:44:41