Comment aligner correctement les zones de texte sur une page web avec des étiquettes

c'est un CSS /question de conception. J'ai trois zones de texte que je veux être le centre alignés sur une page web. Ensuite, je veux une étiquette de description pour le droit de chacun.

Lorsque j'utilise l'attribut comme texte:align:centre parce que les étiquettes sont de longueur différente, il jette l'aligment des zones de texte [voir lien de l'image ci-dessous]

http://www.mediafire.com/imageview.php?quickkey=qcyoajm2iuk

Est-il un moyen facile de garder les zones de texte aligné et puis avoir les étiquettes hors les à droite sans changer les zones de texte?

Grâce.

OriginalL'auteur Grant | 2010-05-09

  1. 5

    fondamentalement, vous devez définir une largeur pour votre forme et float: left d'entrée et de float: right le label, le label devient à côté de votre entrée. Le est un truc de centre par rapport possitionet éléments en CSS: margin: 0 auto mais vous devez définir une largeur.

    Le problème que tu vas avoir, c'est que toutes les entrées sont va être les uns à côté des autres. Afin d'éviter que vous créez votre étiquette et l'entrée dans un élément. Et claire de la flotte. Je voudrais utiliser une UL LI élément, et pas des Paragraphes (comme dans PW exemple), car la plupart du temps, votre formulaire, une liste de questions.

    J'ai fait un exemple pour vous:
    http://jsfiddle.net/Qs4pk/2/

    OriginalL'auteur meo

  2. 3

    utiliser le <fieldset> tag en combinaison avec <label>. Explication étape par étape.

    Alignez ensuite à volonté.

    excellente référence. bien aimé que beaucoup de choses 🙂

    OriginalL'auteur PW.

  3. 1

    Dans votre capture d'écran, vous avez text-align:centrée sur chaque élément à l'intérieur d'un div. Si vous voyez le bon comportement de votre approche.

    Au lieu de cela vous avez besoin au centre d'un div (englobant la zone de votre zone de texte et d'éléments de l'étiquette) et puis à gauche aligner (ce qui sera le navigateur par défaut) les éléments internes.

    Au centre d'un div utilisation: 

    #content {

    largeur: 700 pixels ;
    margin-left: auto ;
    margin-right: auto ;
    }

    OriginalL'auteur Markive

  4. 1

    http://reisio.com/temp/form2.html

    <!doctype html> 
<html> 
<head> 
<title></title> 
<style> 
body { 
margin: 8px; 
padding: 0; 
} 
formulaire { 
margin: 0; 
} 
ul { 
list-style: none; 
margin: 0; 
padding: 0; 
font: 12px sans-serif; 
display: block !important; 
display: inline-block; 
overflow: hidden; 
} 
li { 
float: left; 
claire: à gauche; 
} 
label { 
display: block; 
width: 200px; 
height: 19px; 
line-height: 19px; 
position: relative; 
marge: 0 0 5px; 
curseur: pointeur; 
text-align: right; 
} 
input { 
width: 120px; 
position: absolute; 
left: 0; 
top: 0; 
border: 1px solid gray; 
padding: 1px 0; 
hauteur: 15px; 
font: 12px sans-serif; 
} 
</style> 
</head> 
<body> 
<form action=""> 
<ul> 
<li> 
<label><input> Haricots</label> 
</li> 
<li> 
<label><input> pain de Maïs</label> 
</li> 
</ul> 
</form> 
</body> 
</html>

    OriginalL'auteur reisio

  5. 1

    Vous remettre en question ont aussi un aspect de la conception. Quel est le meilleur alignement des étiquettes et des zones de saisie de texte à partir du point de vue des utilisateurs? J'ai été très surpris il y a quelques mois que j'ai trouvé "Formulaire Web Design" à MIX09 (voir http://videos.visitmix.com/MIX09/C17F). Vous pourrez voir sur des exemples comment améliorer l'expérience utilisateur si l'on place les étiquettes et les zones de saisie de texte dans d'autres endroits. Cette vidéo viens de changer mon esprit dans ce domaine. Vous pouvez aussi regarder http://www.lukew.com/presos/ et des "Meilleures Pratiques pour des Conseils et de Validation des Formulaires Web" http://sixrevisions.com/user-interface/best-practices-for-hints-and-validation-in-web-forms/ dont certains ont près de l'information.

    OriginalL'auteur Oleg