Sélectionnez les inputs et text inputs en HTML - Meilleure façon de rendre la largeur égale?

Question

J'ai un formulaire simple comme ceci (à titre d'illustration uniquement)...

      Nom

      Pays

         Australie
         USA

Ma méthode de mise en page à l'aide de CSS est la suivante...

form  {
    width: 500px;
}

form .input-row {
    display: block;
    width: 100%;
    height: auto;
    clear: both; 
    overflow: hidden; /* étirer pour contenir les enfants flottants */
    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 s'aligne très bien, sauf que mon élément select (dans Firefox en tout cas) n'a pas toujours la même largeur que mes autres éléments input. Il est généralement plus étroit de quelques pixels.

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

Quelle est la meilleure façon de faire en sorte que tous aient la même largeur? J'espère ne pas devoir définir la largeur du select individuellement, ou les placer dans des tableaux...

Answer 1

La solution consiste à spécifier le modèle de boîte pour les éléments de formulaire, et les navigateurs ont tendance à être plus d'accord 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 de tels astuces.

Answer 2

Le rembourrage fera en sorte que le texte soit plus proche du bord de la boîte.

essayez de définir la marge à 0px, et si cela semble correct, jouez avec (comme simplement définir uniquement margin-left)

Answer 3

J'ai eu les mêmes problèmes avec une table et des cellules de largeur 100%, avec une zone de texte (également de largeur 100%) plus large que la cellule de la table.

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 un espace supplémentaire sur le côté droit. Mais au moins ce n'est plus caché !