Comment obtenir une largeur égale d'entrée et sélectionner des champs

Sur le formulaire, j'ai un champs de sélection 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.Comment obtenir une largeur égale d'entrée et sélectionner des champs

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">

Par exemple ci-dessus, la meilleure largeur pour l'élément de sélection est 198 ou 199 px (bien sûr j'ai essayé 193px, mais la différence est importante). Je pense, cela dépend de la résolution, sur divers ordinateurs et navigateurs, car ces éléments n'ont pas la même largeur (parfois je pense que la différence est d'environ 1 ou 2 px). J'ai essayé de placer ces éléments dans des rangées de div ou de table, mais cela n'aide pas.

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

Source

2010-11-01 luk4443

même question posée ici: http://stackoverflow.com/questions/895904/select-inputs-and-text-inputs-in-html-best-way-to-make-equal-width/899283 – BlaM

111

réponse Mise à jour

Voici comment changer le modèle de boîte utilisé par les entrées/textarea/éléments de sélection afin que tous se comportent de la même façon. Vous devez utiliser la propriété box-sizing qui est mis 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 la différence de 2px nous l'avons mentionné plus haut n'existe pas ..

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

note:Sur IE il fonctionne à partir de la version 8 et plus.

originale

si vous rétablissez leurs frontières alors l'élément select sera toujours 2 pixels de moins que les input éléments ..

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

Source

2010-11-01 23:09:43

Merci pour repl y. Et si je règle la frontière pour 2px, il y aura 4 pixels entre les champs d'entrée et de sélection, pour la frontière 3px - 6px ...? – luk4443

@luk, no. Si l'entrée et la sélection ont la même largeur de bordure, la différence restera à 2 pixels. –

Merci. J'essaye ton code dans différents navigateurs et dans Firefox tout va bien, mais ça ne marche pas dans IE 8 et Opera (il y a des différences entre la saisie et la sélection de la largeur) :( – luk4443

J'ai essayé la réponse de Gaby (+1) ci-dessus mais il n'a que partiellement résolu mon problème. Au lieu de cela je le CSS suivant, où la boîte de contenu a été changé pour border-box:

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

Source

2011-05-05 09:26:53 tomsv

+21

Fonctionne mieux que la réponse acceptée – cguedel

Yup, il semble que les champs de formulaire, par exemple: textarea, les champs de saisie fonctionnent toujours bien avec le modèle de boîte de bordure. bouton, case à cocher, radio, soumettre, réinitialiser, et l'entrée de recherche sont border-box par défaut. – Vennsoh

Plus d'infos: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing – JorgeeFG

Ajouter ce code dans css:

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

Source

2015-08-08 09:50:24 151291

-3

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

.enquiry_fld_normal{ 
width:278px !important; 
} 

.enquiry_fld_normal_select{ 
width:280px !important; 
}

Source

2016-01-07 11:03:48 yousuf

Comment obtenir une largeur égale d'entrée et sélectionner des champs

Répondre

Questions connexes