CSS: Tableau avec des étiquettes et des boîtes de texte

Question

Je suis en train de casser la table béquille ...

Je veux placer 3 « étiquettes », « First », « Moyen » et « Last » sur 3 zones de texte de sorte que les étiquettes soient au-dessus des zones de texte correspondantes et que les étiquettes et les zones de texte soient alignées verticalement. En d'autres termes, j'ai besoin d'une table de 3 colonnes où la première rangée a 3 étiquettes et la 2ème rangée a 3 boîtes de texte et tout est justifié à gauche et je veux que toutes les largeurs de colonnes soient identiques et fixes.

Comment est-ce que je fais ceci avec des tables d'E/S utilisant seulement CSS? Je sais que marge-gauche me donnera une distance constante entre les groupes, mais comment puis-je "retour chariot" à la ligne suivante wo en utilisant un paragraphe ou une étiquette de rupture, puisque la distance impliquée est vraiment une fonction de la police, j'imagine, au lieu d'être en mesure de "chariot vers le bas" un nombre spécifié de pixels.

Je sais que display: block mettra les choses sur une nouvelle ligne, mais cela crée une pause avant et après. Je veux juste une pause "après."

J'espère que je l'ai expliqué assez bien.

Merci.

Édition additionnelle: Je comprends que je ne devrais peut-être pas éviter d'utiliser des tables pour lesquelles les tables sont bonnes, mais si CSS avait un attribut analagos à margin-left: 10px mais dans une direction verticale APRES un retour de carriere , l'avantage d'utiliser CSS sur des tables est que je n'aurais pas un million de tags TR et TD dans mon balisage.

Y a-t-il une telle chose?

Answer 1

HTML:

<div class="row"> 
    <div class="column"> 
    <label>Left</label> 
    <input name="left" /> 
    </div> 
    <div class="column"> 
    <label>Left</label> 
    <input name="left" /> 
    </div> 
    <div class="column"> 
    <label>Left</label> 
    <input name="left" /> 
    </div> 
</div> 

CSS:

.row .column{ 
    width: 200px; 
    float:left; 
} 
.row .column input, 
.row .column label{ 
    display:block; 
} 

Vous pouvez maintenant utiliser le style CSS pour les textes et les labels, donc ils ont l'air bien. Notez également à quel point cet exemple est similaire à l'utilisation de tables, ce qui montre que dans certains cas, les tables ne sont pas mauvaises, mais la bonne façon de procéder. Si vous souhaitez aligner les éléments dans une grille, utilisez des tableaux.

Answer 2

Ce que vous faites est de créer vos champs de formulaire ainsi:

<div id="form"> 
    <div class="control"> 
    <div class="label"> 
     <label for="field1">Field 1</label> 
    </div> 
    <div class="field"> 
     <input type="text" name="field1" id="field1"> 
    </div> 
    </div> 
    ... 
</div> 

avec:

#form { overflow: hidden; } // this is important! 
#form div.control { float: left; width: 33%; } 

Maintenant, si l'une de ces étiquettes est plus grande les commandes ne s'alignera pas, mais ce serait Un exemple où CSS "pur" tombe court de ce que les tables peuvent faire facilement et naturellement, ce qui soulève la question: pourquoi abandonnez-vous sur les tables?

Remarque: Une autre réponse dans le même sens a suggéré de ne pas encapsuler l'étiquette et l'entrée dans un div. C'est une approche raisonnable mais vous perdez un peu de puissance expressive. Par exemple, certaines choses dans CSS ne sont possibles que sur des éléments de niveau bloc.Par exemple, vous pouvez changer ci-dessus avec:

#form, div.control { overflow: hidden; width: 600px } // this is important! 
#form div.control { float: left; width: 200px; } 
#form div.control div { float: left; width: 100px; } 

et obtenir vos étiquettes sur la gauche, que vous ne pouvez pas faire tout aussi bien sans les divs internes d'emballage.

Answer 3

Il s'avère que si vous voulez créer un tableau d'étiquettes sur des champs de saisie, l'élément de table est bien à utiliser .... Si l'élément de table est le code html le plus clair, pourquoi ne pas l'utiliser?