CSS, comment créer une étiquette largeur de la plus longue contenant le texte?

Vous devez envelopper chaque étiquette d'entrée, la combinaison d'un élément, puis les envelopper cet élément dans certains conteneur. Ce conteneur doit avoir un min-width, et display: inline-block;.
Ensuite, vous laissez tous les éléments d'entrée flotter à droite, et vous avez terminé.

Ce qui en résulte est très simple, propre et balisage sémantique avec eqaully propre et maintenable CSS, et pas d'exigences pour JavaScript, jQuery, ou d'autres trucs de fantaisie.

Vous pourriez faire quelque chose comme:

 <form>
     <fieldset>
         <p><label for="lorem">lorem</label><input type="text" id="lorem" /></p>
         <p><label for="ipsum">ipsum</label><input type="text" id="ipsum" /></p>
         <p><label for="li">li</label><input type="text" id="li" /></p>
     </fieldset>
 </form>

avec le css

 fieldset {
     min-width: 100px;
     display: inline-block;
 }

 fieldset input{
     float: right;
 }

Ici vous pouvez voir à quoi ça ressemble.
Clairement, vous pouvez définir le style de votre forme avec des marges, des remplissages etc.

Et, de plus, si vous voulez avoir un wrapper qui est sémantiquement plus précis, vous pouvez utiliser une liste ordonnée. Vous pouvez ensuite le style comme tout ce que vous voulez, et ont même une belle supplémentaires wrapper (le <ol>) que vous pouvez utiliser sans ajouter de la sémantique des ordures.

Un exemple serait:

 <form>
     <fieldset>
         <legend>First Example:</legend>
         <ol>
             <li><label for="lorem">lorem</label><input type="text" id="lorem" /></li>
             <li><label for="ipsum">ipsum</label><input type="password" id="ipsum" /></li>
             <li><label for="li">li</label><input type="text" id="li" /></li>
         </ol>
     </fieldset>

     <fieldset>
         <legend>Second Example:</legend>
         <ol>
             <li><label for="a">a</label><input type="text" id="a" /></li>
             <li><label for="b">b</label><input type="number" id="b" /></li>
             <li><label for="c">c</label><input type="range" id="c" /></li>
         </ol>
     </fieldset>

     <fieldset>
         <legend>Third Example:</legend>
         <ol>
             <li><label for="XXXXXXXX">XXXXXXXX</label><input type="email" id="XXXXXXXX" /></li>
             <li><label for="YYYYYYYYYYYY">YYYYYYYYYYYY</label><input type="search" id="YYYYYYYYYYYY" /></li>
             <li><label for="z">z</label><input type="text" id="z" /></li>
         </ol>
     </fieldset>
 </form>

de style par

  fieldset {
     border: 1px solid silver;
     margin: 10px;
     padding: 10px;
     min-width: 100px;
     display: inline-block;
 }

 fieldset li{
     width: 100%;
     display: block;
     position: relative;
 }

 fieldset label{
     margin-right: 10px;
     position: relative;
 }

 fieldset label:after{
     content: ": ";
     position: absolute;
     right: -0.2em;
 }

 fieldset input{
     float: right;
 }

entraînerait ce point de vue. Vous pouvez même jouer avec elle sur ce violon: http://jsfiddle.net/ramsesoriginal/b6Taa/

MODIFIER pour montrer que ce n'ajoute pas de balisage

Avec le code html suivant:

 <form>
     <label for="lorem">lorem<input type="text" id="lorem" /></label>
     <label for="ipsum">ipsum<input type="text" id="ipsum" /></label>
     <label for="li">li<input type="text" id="li" /></label>
 </form>

et le code CSS suivant:

form{
    min-width: 100px;
    display: inline-block;
}

form input{
    float: right;
}

form label{
    display:block;
    margin-bottom: 2px;
}

Vous obtenez l'effet que vous voulez. Vous pouvez jouer avec elle ici. Mais l'ajout de <fieldsets> avec <legend>s n'est pas d'ajouter inutile de balisage, au contraire: il vous permet de regrouper les entrées. Et l'ajout d'un <ol> est sémantiquement correct aussi, depuis l'étiquette d'entrée/de combinaisons sont sémantique des unités et de la forme est une liste de champs qui doivent être remplis dans un ordre logique.

Encore une fois, vous pouvez éviter les balises html fieldsets, les listes, et de tout faire et d'atteindre l'effet désiré, mais du point de vue sémantique, il serait bon d'avoir au moins le fieldset avec une étiquette..

EDIT2: c'est un "vrai" formulaire d'inscription avec un bon balisage sémantique peut ressembler à:

 <form>
     <ol>
         <fieldset>
             <legend>Account</legend>
                 <li><label for="username">Username</label><input type="text" id="username" required  /></li>
                 <li><label for="password">Password</label><input type="password" id="password" required  /></li>
         </fieldset>

         <fieldset>
             <legend>Personal Data</legend>
                 <li><label for="name">Name</label><input type="text" id="name" /></li>
                 <li><label for="surname">Surname</label><input type="text" id="surname" /></li>
                 <li><label for="dob">Date of birth</label><input type="date" min="1900-01-01" max="2012-02-17" placeholder="YYYY-MM-DD" id="dob" /><span class="additionalInfo">Please input the date of birth in the following format: YYYY-MM-DD</span></li>
         </fieldset>

         <fieldset>
             <legend>Contact Information</legend>
                 <li><label for="email">E-mail</label><input type="email" id="email" required placeholder="[email protected]" /></li>
                 <li><label for="tel">Telephone number</label><input type="tel" id="tel" placeholder="(555) 555-5555"
              pattern="^\(?\d{3}\)?[-\s]\d{3}[-\s]\d{4}.*?$" /><span class="additionalInfo">Please input the telephone number in the following format: (555) 555-5555</span></li>
                 <li><label for="url">Website</label><input type="url" id ="url" placeholder="http://www.example.com"></li>
         </fieldset>

         <li><input type="submit" /></li>
     </ol>
 </form>

et le style:

 fieldset {
     border: 1px solid silver;
     margin: 10px;
     padding: 10px;
     min-width: 100px;
     display: inline-block;
 }

 fieldset li{
     width: 100%;
     display: block;
     position: relative;
     margin-bottom: 2px;
 }

 fieldset label{
     margin-right: 10px;
     position: relative;
 }

 fieldset label:after{
     content: ": ";
     position: absolute;
     right: -0.2em;
 }

 fieldset input{
     float: right;
 }

 fieldset li .additionalInfo{
     position: absolute;
     padding: 5px;
     margin-top: 5px;
     display: none;
     background-color: white;
     border: 1px solid black;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     border-radius: 5px;
     -webkit-box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.5);
     -moz-box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.5);
     box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.5);
     z-index: 10;
 }

 fieldset li:hover .additionalInfo{
     display: block;
 }

J'ai inclus quelques informations supplémentaires, afin de vous montrer comment il viennent tous ensemble pour une entité logique. De même, on pourrait inclure des erreurs et tout ce que vous souhaitez inclure. C'est juste un exemple rapide, j'ai jeté ensemble, mais il doit montrer que l'on peut réaliser des choses intéressantes avec cette technique. Une chose que j'ai également changé, c'est que j'ai mis la <ol> directement sous la forme, de sorte que vous n'avez pas à répéter pour chaque fieldset. Personnellement, je trouve cela d'une certaine manière.. rébarbatif, mais puisque vous voulez pour avoir un minimum de balisage, cela fonctionne assez bien et serait très accessible. Encore une fois, lisez cet article si vous n'avez pas. Il donne une grande perspicacité dans le marquage correctement un formulaire.

Oh, et la "vraie vie" exemple est visible ici: http://fiddle.jshell.net/ramsesoriginal/b6Taa/9/show/

Et vous pouvez jouer avec lui ici:
http://jsfiddle.net/ramsesoriginal/b6Taa/9/

EDIT: j'ai mis à jour le dernier exemple

Il y avait une erreur dans mon code. L'élément wrapper (le <li>dans le deuxième et dans le dernier exemple, la <label> dans le minimum de l'un et de l' <p> dans le premier on devrait avoir au moins 1 pixel de la marge en bas, ou bien certains navigateurs voir les champs de saisie du chevauchement et de ne pas les faire flotter correctement. J'ai mis à jour le dernier exemple pour que ça fonctionne, partout ailleurs vous devez garder cela à l'esprit.

solution simple serait de fixer la longueur de l'étiquette qui permettrait d'accueillir le plus grand lable (ajouter un peu de 50px supplémentaire de sorte que vous pouvez centrer) et l'utilisation text-align:center

Ici un violon pour le même.. http://jsfiddle.net/mvivekc/4P58S/

espère que cela aide.

Coup et essayer de voir quelle est la plus grande étiquette de l'occupant. Attribuer que la largeur de toutes les autres étiquettes. Vous recommandons de placer des virgules dans une colonne séparée. Il a l'air propre.