aligner la zone de texte, de texte et d'étiquettes dans le html?
Je ne peux pas le comprendre. Comment puis-je aligner la zone de texte? J'ai pensé à l'aide float: left sur les étiquettes sur la gauche (puis de le faire sur l'entrée lorsque j'aperçois l'entrée était maintenant sur la gauche, sans que) mais c'était complètement faux.
Comment puis-je obtenir la zone de texte aligner avec les étiquettes sur la gauche à côté de la zone de texte au lieu de l'extrême gauche?
L'image est un exemple de ce que je voudrais qu'il ressemble.
- Pourquoi ne pas vous post le balisage et css que vous avez maintenant?
- +1 sur le Floyd Rose est commentaire. J'ai fait ce que vous êtes en montrant, sans tables.
Vous devez vous connecter pour publier un commentaire.
Vous avez deux cases à gauche et à droite, pour chaque étiquette/paire d'entrée. Les deux boîtes sont dans une rangée et ont une largeur fixe. Maintenant, vous avez juste à prendre le texte de l'étiquette du flotteur vers la droite avec
text-align: right;
Voici un exemple simple:
http://jsfiddle.net/qP46X/
table
À l'aide d'un tableau serait une (et facile) de l'option.
Autres options sont sur la définition d'une largeur fixe de sur le et de le rendre le texte aligné à droite:
ou, comme il l'a souligné, tous les faire flotter au lieu de la ligne.
vous pouvez faire un multi div layout comme ce
où
.fieldcontainer { clear: both; }
.label { float: left; width: ___ }
.le champ { float: left; }
Ou, en fait, je préfère les tables pour les formes de ce genre. C'est beaucoup de données tabulaires et il s'en sort très propre. Les deux fonctionneront bien.
J'aime définir la "ligne-taille" dans le css pour les divs pour les amener à s'aligner. Voici un exemple de la façon dont je le fais à l'aide d'asp et css:
ASP:
Et voici le code dans le fichier CSS pour rendre tous les champs ci-dessus ont l'air sympa et soigné:
vous pouvez vous tirez sur tout, mais les balises DIV et la remplacer par votre propre contenu.
Faites-moi confiance quand je dis qu'il ressemble à aligner la façon dont l'image dans le post original ne!
Je voudrais poster une capture d'écran mais la Pile ne me laissera pas:
Oups! Votre modification ne pouvait pas être présenté, car:
Nous sommes désolés, mais comme un spam mécanisme de prévention, les nouveaux utilisateurs ne sont pas autorisés à poster des images. Gagner plus de 10 réputation pour afficher des images.
🙂
J'ai trouvé une meilleure option,
Démo ici: https://jsfiddle.net/durtpwvx/