Sélectionnez les entrées et les entrées de texte en HTML – La meilleure façon de créer une largeur égale?

J’ai un formulaire simple comme ça (à titre d’exemple seulement) …

Australia USA

Ma méthode de mise en page utilisant CSS est la suivante …

 form { width: 500px; } form .input-row { display: block; width: 100%; height: auto; clear: both; overflow: hidden; /* stretch to contain floated children */ margin-bottom: 10px; } form .input-row label { display: block; float: left; } form .input-row input, form .input-row select { display: block; width: 50%; float: right; padding: 2px; } 

Tout cela s’aligne assez bien, sauf que mon élément select (dans Firefox de toute façon) n’est pas toujours de la même largeur que mes autres éléments d’ input . Il est généralement plus étroit de quelques pixels.

J’ai essayé de changer la largeur à une taille de pixel (par exemple 200px ) mais cela n’a pas fait de différence.

Quelle est la meilleure façon d’obtenir que tous aient la même largeur? J’espère qu’il ne me sert pas de régler la width la select individuellement, ou de les mettre dans des tableaux …

La solution consiste à spécifier un modèle de boîte pour les éléments de formulaire, et les navigateurs ont tendance à être plus nombreux lorsque vous utilisez border-box:

 input, select, textarea { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } 

Il y a un projet normalize.css qui regroupe ces astuces.

le remplissage rendra le texte plus proche du bord de la boîte.

essayez de définir la marge à 0px, et si cela vous semble correct, jouez avec (par exemple, ne définissez que margin-only)

Même problème avec la table et les cellules de largeur à 100%, avec une zone de texte (également avec une largeur de 100%) plus large que la cellule de tableau.

Cela a résolu mon problème dans le css:

 table td { padding-right: 8px; } 

Ce n’est pas la meilleure solution, car vous obtenez probablement de l’espace supplémentaire sur le côté droit. Mais au moins, ça ne se cache plus!