web-dev-qa-db-fra.com

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

J'ai un formulaire simple comme ça (à titre indicatif seulement) ...

<form>

   <div class="input-row">
      <label>Name</label>
      <input type="text" name="name" />
   </div>

   <div class="input-row">
      <label>Country</label>
      <select name="country">
         <option>Australia</option>
         <option>USA</option>
      </select>
   </div>

</form>

Ma méthode de mise en page en 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 input. Il est généralement plus étroit de quelques pixels.

J'ai essayé de changer la largeur en pixels (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 revient pas de définir individuellement les selectwidth ou de les mettre dans des tableaux ...

cssxhtml
73
alex

La solution consiste à spécifier le modèle de boîte pour les éléments de formulaire, et les navigateurs ont tendance à être le 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 normalize.css projet qui regroupe ces astuces.

164
Kornel

A eu les mêmes problèmes avec le tableau et les cellules à 100% de largeur, avec une zone de texte (également avec une largeur à 100%) plus large que la cellule du tableau.

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

table td
{
    padding-right: 8px;
}

Ce n'est pas la meilleure solution jamais, car vous obtenez probablement un espace supplémentaire sur le côté droit. Mais au moins, il ne se cache plus!

0
Herman Cordes

le rembourrage rapprochera le texte du bord de la boîte.

essayez de régler la marge sur 0px, et si cela semble correct, jouez avec (comme si vous définissiez la marge gauche uniquement)

0
Luke Schafer