Système de grille CSS pour les formulaires (multi-colonnes)

Question

Pour référence future, voici le résultat final avec une précision au pixel près :

Le code CSS :

._25 {
    width: 21%;
    display: inline;
    float: left;
    margin-left: 2%;
    margin-right: 2%;
}
._50 {
    width: 46%;
    display: inline;
    float: left;
    margin-left: 2%;
    margin-right: 2%;
}
._75 {
    width: 71%;
    display: inline;
    float: left;
    margin-left: 2%;
    margin-right: 2%;
}
._100 {
    width: 96%;
    display: inline;
    float: left;
    margin-left: 2%;
    margin-right: 2%;
}
label {
    width: 100%;
}
input {
    border: 1px solid #B3B3B3;
    width: 100%;
    -moz-border-radius: 3px;
}
textarea {
    border: 1px solid #B3B3B3;
    width: 100%;
    -moz-border-radius: 3px;
}
select {
    border: 1px solid #B3B3B3;
    width: 100%;
    -moz-border-radius: 3px;
}

Et quelques exemples de code HTML :

<div class="_50">
    <p><label for="in_user">Username</label><input id="in_user" type="text" value=""/></p>
</div>

<div class="_50">
    <p><label for="in_pass">Password</label><input id="in_pass" type="text" value=""/></p>
</div>

---

Récemment, j'ai commencé à utiliser les systèmes de grille CSS et je trouve le processus de conception d'une page Web beaucoup plus simple. J'essaie maintenant de styliser des éléments de formulaire, mais J'ai beaucoup de mal à créer des formulaires avec des colonnes. Prenons l'exemple suivant :

• div (largeur = 400px)
  • formulaire
    • ul
      • li .half
        • étiquette
        • entrée (devrait être de 200px de large)
      • li .half
        • une autre étiquette
        • une autre entrée (qui doit également avoir une largeur de 200px)

En fait, j'applique une classe dont l'attribut de largeur est de 50 %, mais si je mets les deux entrées côte à côte, la ligne est plus grande que 100 % (400px). les bordures, les marges et les paddings .

Existe-t-il un système de grille CSS que je puisse utiliser pour créer des formulaires à plusieurs colonnes tout en veillant à ce que tous les éléments du formulaire aient la même taille ? (entrées, sélections et zones de texte) ; par exemple, une entrée dans une colonne doit avoir 400px, tandis que deux colonnes doivent avoir 200px chacune.

EDIT : Wufoo a algunos exemples de ce que j'essaie de faire, mais je suis trop ignorant en matière de CSS pour comprendre tout ce code et j'apprécierais que quelqu'un puisse me donner quelques conseils.

Answer 1

Je pense que c'est ce que vous recherchez :

http://www.alistapart.com/articles/prettyaccessibleforms/

Cela devrait aider à simplifier un peu votre structure. Il ne décrit pas explicitement comment créer des formulaires à colonnes multiples, mais la technique pourrait probablement s'étendre à cela avec un peu de créativité de votre part.