Largeur de 100% sur le type d'entrée Soumettre par rapport au texte de type d'entrée
J'ai un formulaire de connexion qui est conçu pour avoir les zones de texte et le bouton soumettre extensible à 100% de la taille du récipient. C'est un liquide mobile, mise en page, mais mon jsbin exemple ci-dessous a fixe la taille du conteneur pour les besoins de la démonstration.
Dans IE7, IE8, FF 4, Safari - tous rendre sur le bouton soumettre un peu plus court que les zones de texte. Firebug mise en page de l'outil montre les zones de texte à 500px de large, mais le bouton soumettre au 498px de large. Dans mon exemple, le bouton soumettre est 6px maigres. Comment puis-je résoudre ce problème de sorte qu'il prend toute la largeur?
Mise à jour
J'ai fait un autre test en définissant une largeur fixe sur les entrées. Il semble que le bouton submit ne suit pas le modèle de boîte. J'ai utilisé un 100px de largeur, et il a montré 98px + 2px frontières, tandis que les zones de texte ont montré 100px de largeur + 2px aux frontières.
Donc, je suppose que la question est comment puis-je gérer cela à un design fluide? -1px droite et à gauche de rembourrage sur les boutons ne semble pas fonctionner, et la conception des appels pour un 1px frontière sur le bouton! Vais-je avoir recours à des js?
source d'informationauteur ScottE | 2011-07-08
Vous devez vous connecter pour publier un commentaire.
Pour quelque raison mozilla définit les entrées de type texte à
-moz-box-sizing:content-box;
mais le bouton de soumission est fixé à-moz-box-sizing:border-box;
Réglage de la suivante vous donnera l'intention de rendu en FF.
Mise à jour:
Ajouté Safari et IE8+ support
Je crois que c'est la manière dont le navigateur est le calcul de l'input[type=submit] dimensions. J'ai essayé l'application de certaines réinitialise mais ceux qui n'ont pas l'air de fonctionner non plus. Je suis sur un Macbook Air avec Chrome et sur votre JSBin exemple, la prévisualisation en temps réel avait l'air bien, mais le "Rendu" validé votre question.
J'ai essayé jsfiddle.net et il a montré la même question. Voici une solution de contournement si ce sera à la mouche pour votre application. Tout simplement supprimer la bordure et arrière-plan du bouton submit et le style de l'emballage du div à la place, puis mettre un écouteur de clics sur la div pour soumettre le formulaire:
CSS:
JQUERY:
http://jsfiddle.net/pZcx4/
ALTERNATIVE NATIF JS:
http://jsfiddle.net/pZcx4/3/
C'est assez bizarre en effet. Je pense que la 1px frontière est ajouté à l'extérieur de vos saisies de texte de sorte qu'il est de 500px de large.
Tout sur le bouton Soumettre le bouton est calculé sur les côtés, mais montre à l'intérieur, de sorte que vous obtenez 500px - 1px - 1px = 498px large...
Une solution possible que vous pourriez faire est de simplement créer le code CSS suivant:
Qui résout votre problème et il montre encore votre bouton soumettre comme 500px de large dans Firebug. Et que votre formulaire est mis à 500px de largeur et de toute façon cela ne change pas, il n'y a pas une grande utilité dans la mise en œuvre d'une largeur en pourcentage.
Pas sûr que cela fonctionne pour votre environnement. Quand j'ai joué avec le jsbin, le réglage de la
width
travaillé....login-tb { width: 99.75%; border: 1px solid red; padding: 0; margin: 0; }
Testé uniquement sur Chrome.