Aligner les contrôles correctement

Je veux modifier l'apparence sur les contrôles de même sur le site que je suis en train de travailler sur, mais il semble que cela ne va pas bien.
Je veux utiliser les CSS pour aligner correctement les commandes.
Je veux avoir la case et l'étiquette aligné à gauche, puis peu à peu la salle, puis zone de texte est à venir.
Aussi, je veux que toutes les zones de texte à être alignés sur la même verticale.
Comment puis-je faire avec css sans l'aide de tableaux.

Aligner les contrôles correctement

Merci d'avance pour votre aide, Laziale

OriginalL'auteur Laziale | 2011-01-26

  1. 3

    CSS

    div{margin-bottom:2px;}
input[type="checkbox"]{display:block; float:left; margin-right:2px;}
label{display:block; float:left; width:150px;}

    HTML

    <div><input type="checkbox" /><label>Address</label><input type="text" /></div>
<div><input type="checkbox" /><label>State</label><input type="text" /></div>
<div><input type="checkbox" /><label>City</label><input type="text" /></div>
<div><input type="checkbox" /><label>ZIP</label><input type="text" /></div>
<div><input type="checkbox" /><label>Contact Person</label><input type="text" /></div>
<div><input type="checkbox" /><label>Contact Person</label><input type="text" /></div>

    OriginalL'auteur fesh

  2. 1

    Sérieusement, pour vous avez besoin, vous devriez utiliser des tableaux. vous aurez beaucoup plus de html et CSS en essayant de l'atteindre de toute façon.

    L'ensemble de la voiture pour ne pas utiliser des tableaux en Html, c'est pour la présentation des pages et ces lorsque vous souhaitez réorganiser votre mise en page (bouger les choses) en utilisant que du CSS. mais je doute que vous souhaitez réorganiser la façon dont votre formulaire.

    OriginalL'auteur Shiv Kumar

  3. 0

    Façon la plus simple: Indiquez la largeur et la float:left pour les conteneurs (étiquettes) http://jsfiddle.net/tCcff/2/

    <style type="text/css">
label {
    float: left;    
    width: 8em;    
}

label.text {
  width: 7em;
}
</style>
<div>   
    <label> <input type='checkbox' /> Short </label> <label class='text'>Field Label</label><input type='text' />
</div>
<div>   
    <label> <input type='checkbox' /> Long Label here </label> <label class='text'>Text2</label><input type='text' />
</div>
<div>   
  <label> <input type='checkbox' /> Label here </label> <label  class='text'>Text Three-----</label> <input type='text' />
</div>

    Cet article est une bonne référence pour du CSS mise en page du formulaire: http://articles.sitepoint.com/article/fancy-form-design-css/3

    OriginalL'auteur Juan Mendes