Comment faire pour obtenir l'égalité de la largeur de l'entrée et de sélectionner les champs

Sur la forme, j'ai un select et deux champs de saisie. Ces éléments sont alignés verticalement. Malheureusement, je ne peux pas obtenir la même largeur de ces éléments.

Voici mon code:

<select name="name1" style="width:198px">
  <option>value1</option>
  <option>value2</option>
</select><br/>
<input type="text" name="id1" style="width:193px"><br/>
<input type="text" name="id2" style="width:193px">

Pour l'exemple ci-dessus, le meilleur de la largeur pour sélectionner l'élément est 198 ou 199 px (j'ai bien essayé 193px, mais la différence est majeure). Je pense que, ça dépend de la résolution, sur différents ordinateurs et navigateurs étant donné que ces éléments n'ont pas d'égales largeurs (parfois, je pense que la différence est d'environ 1 ou 2 px). J'ai essayé de mettre ces éléments dans des div ou des lignes de la table, mais il n'aide pas.

Q: Comment pourrais-je obtenir exactement la même largeur de ces éléments?

InformationsquelleAutor luk4443 | 2010-11-01
  1. 126

    Mise à jour de réponse

    Ici est de savoir comment changer le modèle de boîte utilisé par les input/textarea/sélectionner les éléments de sorte qu'ils se comportent tous de la même façon. Vous devez utiliser le box-sizing propriété qui est mise en œuvre avec un préfixe pour chaque navigateur

    -ms-box-sizing:content-box;
-moz-box-sizing:content-box;
-webkit-box-sizing:content-box; 
box-sizing:content-box;

    Cela signifie que le 2px différence nous l'avons mentionné précédemment n'existe pas..

    exemple à http://www.jsfiddle.net/gaby/WaxTS/5/

    remarque: Sur IE ça fonctionne à partir de la version 8 et plus..

    Original

    si vous réinitialisez leur frontières puis le select élément sera toujours de 2 pixels de moins que le input éléments..

    exemple: http://www.jsfiddle.net/gaby/WaxTS/2/

    • Merci pour la réponse. Et si j'ai mis en bordure de 2px, il y aura 4 pixels entre l'entrée et sélectionnez les champs, pour 3px frontière - 6px...?
    • pas de. Si à la fois d'entrée et sélectionnez la même largeur de la bordure de la différence restera à 2 pixels..
    • Merci. J'ai essayer votre code dans différents navigateurs et dans Firefox, tout va bien, mais il ne fonctionne pas sous IE 8 et de l'Opéra (il y a des différences entre l'entrée et sélectionnez largeur) 🙁
    • vous avez raison .. mon erreur.. il semble que la boîte de sélection augmente la frontière à l'intérieur au lieu de l'extérieur comme de tous les autres éléments..
    • Donc, il semble qu'il n'est pas si facile à résoudre 🙁 Deux éléments de forme et il y a de tels problèmes à régler largeur égale 🙁
    • posté une solution pour les navigateurs modernes..
    • Peut-être vous étiez un sens à préciser box-sizing: border-box? Je pense que c'est ce que vous vouliez dire. Contenu de la boîte est la valeur par défaut où rembourrage+marges ajouter à la largeur.
    • pour les éléments de formulaire par défaut est content-box (à l'exception de la select élément). Ma réponse juste dit qu'il a besoin d'utiliser le même pour tous les éléments d'entrée, parce que c'était l'OP problème.. si vous utilisez content-box ou border-box n'est pas important.. l'important est de le rendre cohérent à travers les éléments du formulaire.
    • Pour info la plupart des navigateurs de nos jours n'ont pas besoin de préfixes plus.
    • clairement ne fonctionne pas si la frontière n'est pas définie, comme: jsfiddle.net/gaby/WaxTS/5 la réponse ci-dessous pour résoudre le problème (tomsv un)
    • fonctionne très bien dans l'exemple que vous avez posté (mine). Que pensez-vous ne pas travailler ?
    • regarde comme j'ai posté la version incorrecte de fichier: jsfiddle.net/WaxTS/1379
    • en effet, mais c'est parce que la ont un autre défaut de la frontière largeurs..
    • votre jsfiddle semble horrible dans le courant de chrome, et si vous supprimez la frontière définition de css, le problème d'origine est de retour, ce qui le rend inutilisable. Je ne vois pas comment votre solution d'aide à rien, de toute façon, celui présenté ci-dessous, fonctionne tout simplement parfait, et résout le problème indépendamment des paramètres, navigateurs etc.
    • oui.. cette solution ne fonctionne que lorsque vous réinitialisez les frontières. Je suis en supposant qu'elle fait d'aider les OP depuis qu'il a accepté..
    • Il devrait vraiment être: -ms-box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box; box-sizing:content-box; La syntaxe standard devrait aller dernier à suivre amélioration progressive de la méthodologie, de sorte que dans l'avenir, lorsque la norme est largement mis en œuvre, les agents d'utilisateur par défaut pour utiliser la syntaxe standard et vous pouvez retirer le préfixe versions.
    • d'accord! Bien que, dans ce cas, il semble que vous pouvez supprimer le fournisseur de préfixes complètement selon caniuse sur box-sizing

    InformationsquelleAutor Gabriele Petrioli
  2. 112

    J'ai essayé Gaby réponse (+1) ci-dessus, mais seulement partiellement résolu mon problème. Au lieu de cela j'ai utilisé le code CSS suivant, où le contenu-box a été changée pour border-box:

    input, select {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
    InformationsquelleAutor tomsv
  3. 4

    Ajouter ce code dans le css:

     select, input[type="text"]{
      width:100%;
      box-sizing:border-box;
    }
    InformationsquelleAutor 151291
  4. -3

    créer une autre classe et d'augmenter la taille avec 2px
    exemple

    .enquiry_fld_normal{
width:278px !important; 
}

.enquiry_fld_normal_select{
width:280px !important; 
 }
    InformationsquelleAutor ionMobDev