Deux champs de saisie sur une seule ligne, de les aligner un à gauche et l'autre droite
Je veux avoir une forme qui se compose de différents champs de saisie. Sur certaines lignes il devrait y avoir deux champs de saisie. Le second doit être aligné à droite.
HTML:
<table>
<tr>
<td>
<input type="text" name="first-name" class="form-first-name" />
<input type="text" name="last-name" class="form-last-name" />
</td>
</tr>
<tr>
<td class="empty-row"> </td>
</tr>
<tr>
<td>
<input type="text" name="address-1" class="form-address-1" />
</td>
</tr>
</table>
CSS:
.form-address-1 {
width: 100%;
}
.form-first-name, .form-last-name {
width: 46%;
}
.form-last-name {
float: right;
}
Mon problème est que les champs de saisie de tailles différentes et donc la taille de la ligne en quelque sorte des changements. J'ai essayé de régler la largeur de tr
sans succès. Comment puis-je aligner le deuxième champ de saisie à droite?
Vous devez vous connecter pour publier un commentaire.
Sa boîte-problème de mise en page.
vérifier auprès de l'inspecteur, et vous verrez que votre adresse d'entrée est débordant de sa ligne.
(c'est parce que 100% + de marge par défaut/padding = plus de 100%)
Travail Violon
Ajouter ceci dans votre CSS
box-sizing
et il semble que IE7 ne peut pas gérer cela. J'ai donc définir la largeur de.form-address-1
à 99% et il a travaillé dans mon premier test.Vous pouvez le faire comme:
http://jsfiddle.net/KxUgt/8/
.form-last-name
n'est pas entièrement aligné à droite par rapport à.form-address-1
Définir la largeur de la table, pas le tr.
.form-last-name
n'est pas parfaitement aligné sur le côté droit. Il devrait être sur le même niveau que.form-address-1
et aligné à droite.faire usage de
min-width:
et aussi faire.form-first-name{float:left;}
min-width
sur la table et j'ai mis lefloat:left
comme vous l'avez dit, mais.form-last-name
n'est pas complètement aligné à droite...