Aligner les étiquettes dans le formulaire à côté de l'entrée

Question

J'ai de très de base et connu scénario de la forme où j'ai besoin d'aligner les étiquettes à côté des entrées correctement. Cependant, je ne sais pas comment le faire.

Mon but serait que les étiquettes sont alignées à côté des entrées pour le côté droit. Voici l'image exemple de résultat souhaité.

J'ai fait du violon pour votre commodité et pour préciser ce que j'ai maintenant http://jsfiddle.net/WX58z/

Answer 1

Une solution possible:

• Donnez les étiquettes display: inline-block ;
• Donnez-leur une largeur fixe
• Aligner le texte à droite

C'est:

 label { display: inline-block; width: 140px; text-align: right; }​
 

http://jsfiddle.net/WX58z/1/

Answer 2

Répondu à une question comme avant, vous pouvez consulter les résultats ici:

Création de formulaire ont des champs et le texte en regard les uns des autres - qu'est-ce que la sémantique façon de le faire?

Afin d'appliquer les mêmes règles pour que votre violon vous pouvez utiliser display:inline-block pour afficher votre étiquette d'entrée et de groupes côte à côte, comme suit:

CSS

input {
    margin-top: 5px;
    margin-bottom: 5px;
    display:inline-block;
    *display: inline;     /* for IE7*/
    zoom:1;              /* for IE7*/
    vertical-align:middle;
    margin-left:20px
}

label {
    display:inline-block;
    *display: inline;     /* for IE7*/
    zoom:1;              /* for IE7*/
    float: left;
    padding-top: 5px;
    text-align: right;
    width: 140px;
}

mis à jour le violon

Answer 3

J'utilise quelque chose semblable à ceci:

 <div class="form-element">
  <label for="foo">Long Label</label>
  <input type="text" name="foo" id="foo" />
</div>
 

Style:

 .form-element label {
    display: inline-block;
    width: 150px;
}