CSS: Le bouton Soumettre a l'air plus petit que l'entrée de texte et textarea

Le rembourrage sur les champs de texte donnez-lui un espace supplémentaire sur les côtés. Définissez le rembourrage des entrées et Texareas sur 0.

Je pense que c'est un problème de rendu du navigateur ... avec des boutons affichés différemment des entrées de texte.

Pour corriger, ajoutez ceci à votre CSS P>

form input[type="submit"]{
    width:273px;
}

Le problème est que les pièces de formulaire ne sont généralement pas rendues comme des éléments HTML normaux et les coiffants sont toujours un peu frappés. Je tenterais d'éviter un cas comme celui-ci nécessitant un dimensionnement exact, mais si vous ne pouvez pas, diviser les sélecteurs comme ceci: xxx

Notez que j'ai ajouté 20 px (10 x 2) à la largeur pour compenser le rembourrage.

Ceci est dû au modèle de boîte utilisé est différent pour le et le / < Code> </ code>. Vous pouvez rendre les modèles de la boîte de la même manière en les spécifiant avec CSS: <pré> xxx </ pré> <p> Vous pouvez en savoir plus sur les modèles de boîte ici: <a href = "http://www.quirsmode.org/csss /box.html">Http://www.quirksmode.org/css/box.html </a> </ p> <p> J'ai modifié votre jsfiddle pour le montrer: <a href = "http: // jsfiddle.net/a9plm/5/"> DémoJsfiddle Démo </a> </ P> </ P> </div> <hr> <!-- comments --> <div class="pl-5"> <small class="text-muted">0 commentaires</small> <div class="comments mt-3"> </div> </div> </div> </div> <hr> <div class="row mt-3"> <div class="col-lg-1 col-md-2 col-2 col-sm-2 text-center pt-1 mx-0 px-0"> <div class="badge badge-score"> 0<br> votes </div> </div> <div class="col-lg-11 col-md-10 col-10 col-sm-10"> <div class="body-content"> <p> J'ai utilisé cette solution CSS uniquement qui fonctionne dans IE, FF et Chrome. Fondamentalement, l'idée est de forcer manuellement la hauteur des éléments d'entrée aux valeurs plus grandes que les boîtes standard. Faites cela pour le texte et le bouton: <ul> <li> Définir des marges et un rembourrage à 0. Li> </li><li> Set vertical-aligner au milieu. li> </li><li> Utilisez la hauteur / la largeur pour contrôler les dimensions de texte et de bouton. La hauteur de texte doit comporter plusieurs pixels supérieurs à la hauteur de la police (afin de remplacer les dimensions de la boîte standard). La hauteur du bouton doit être de 2 pixels supérieurs au texte. Li> ul> <p> Exemple: P> </p><pre>input { margin:0; padding:0; border:solid 1px #888; vertical-align:middle; height:30px; } input[type="submit"] { height:32px; } </pre></li></ul></p> </div> <hr> <!-- comments --> <div class="pl-5"> <small class="text-muted">0 commentaires</small> <div class="comments mt-3"> </div> </div> </div> </div> <hr> </div> <div class="col-lg-3 col-md-12 col-12 col-sm-12" > <div class="related"> <iframe src="https://rcm-eu.amazon-adsystem.com/e/cm?o=8&p=12&l=ez&f=ifr&linkID=b777da379e25dfc65f34887292b82918&t=birdy0c-21&tracking_id=birdy0c-21" width="300" height="250" scrolling="no" border="0" marginwidth="0" style="border:none;" frameborder="0"></iframe> <p class="font-weight-bold">Articles qui pourrait vous intéresser :</p> <a href="/question/google-chrome-uncaught-promis-domexception-lors-de-la-lecture-audio" class=""> Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO </a> <hr> <a href="/question/select2-ne-s-39-affiche-pas-correctement-dans-le-mode-bootstrap" class=""> Select2 ne s'affiche pas correctement dans le mode bootstrap </a> <hr> <a href="/question/le-bootstrap-de-twitter-a-t-il-des-classes-utilitaires-de-taille-de-police" class=""> Le bootstrap de Twitter a-t-il des classes utilitaires de taille de police? </a> <hr> <a href="/question/comment-puis-je-d-eacute-finir-un-format-pour-les-nombres-d-39-entr-eacute-e-dans-blazor" class=""> Comment puis-je définir un format pour les nombres d'entrée dans Blazor </a> <hr> </div> <div class=""> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5975820494937925" data-ad-slot="4267220326" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </div> </div> <script type="text/javascript" src="/js/purecookie.js"></script> </div> <div class="container col-lg-8 col-md-12 ads-footer"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5975820494937925" data-ad-slot="5580301997" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </body> <footer> <div class="row col-lg-12 col-md-12 text-muted"> © 2020 www.devfaq.fr - Licensed under <a href="https://creativecommons.org/licenses/by-sa/3.0/" rel="license"> cc by-sa 3.0 </a>  with <a href="https://stackoverflow.blog/2009/06/25/attribution-required/" rel="license"> attribution required</a>. </div> </footer> </html>