CSS: champ de saisie et sélectionnez les bogues d'options?

StackOverflow https://stackoverflow.com/questions/5494949

  •  14-11-2019
  •  | 
  •  

Question

Pourquoi les champs d'entrée ont toujours «dépassé» la div qui les contienne lorsque je les définis à 100%?

css,

.item-form {
    margin:0px 0px 10px 0px;
    clear:both;
    border:1px solid #999966;
} 

.item-form  input,  
.item-form textarea,
    {
    background-color:#ffffff;
    border: 1px solid #dddddd; 
    width:100%;
    font-family:Arial, Helvetica, sans-serif;
    font-size:13px;
    padding:2px 2px 2px 2px;
}

html,

<div class="item-form">
    <input name="username" type="text" id="username" value="" title="USER NAME"/>
</div>

production,enter image description here

Comment puis-je le réparer ??

Merci.

ÉDITER:

Il me semble avoir résolu le problème des champs d'entrée, mais je suis ensuite tombé sur un autre problème - Sélectionner le champ,

.item-form {
    margin:0px 0px 10px 0px;
    padding:0px 6px 0px 0px; /** important **/
    clear:both;
    }

.item-form select{
    border: 1px solid #dddddd; 
    width:100%; /** a bug to fix **/
    font-family:Arial, Helvetica, sans-serif;
    font-size:13px;
    padding:2px 2px 2px 2px;
    color:#999;
    }

Maintenant, les champs sélectionnés sont «sous-gérés» !!

enter image description here

Comment puis-je réparer ça??

Merci.

Était-ce utile?

La solution

Il donne aux entrées 100% de largeur, alors Ajout du rembourrage 2px et de la bordure 1px de chaque côté. Le résultat est une entrée de 6px trop large.

Pour réparer, vous devez restreindre la largeur disponible pour les entrées en ajoutant un rembourrage au élément parent. Dans ce cas, ajouter 6px rembourrage droit à .item-form:

.item-form {
    padding-right: 6px;
} 

.item-form input,  
.item-form textarea {
    width: 100%;
    padding: 2px;
}

Les sélections sont les étranges, car ils ne le faites pas Suivez les règles ci-dessus (largeur de 100% comprend le rembourrage) - donc vous ne le faites pas veulent restreindre la largeur de leurs parents. L'astuce consiste donc à ne mettre que des éléments de wrapper avec un rembourrage autour des entrées et des textares, mais pas autour de sélections.

Voir cet exemple Pour l'alignement parfait pour les pixels.

Autres conseils

Utilisation outline à la place de border. border affecte la disposition en ce qu'elle fait de la place pour la frontière. outline Les coups (ou décrivent) les bords et aucun positionnement ne change. Il est deux pixels car vous avez deux bordures à un pixel de chaque côté, ce qui le fait apparaître deux pixels.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top