Est-il possible de style de saisie de texte pour remplir la largeur de son parent?

J'ai eu ce problème pendant des années et j'ai vu des questions similaires, mais aucun d'entre eux ont abordé le fait que lors de la configuration de width: 100% sur un élément - les rembourrages, les marges et les frontières augmentation la largeur.

Jetez un oeil à cette Violon.

Le blanc supérieure de la zone de texte est une zone de texte standard avec sa largeur à 100%. Comme vous pouvez le voir il déborde celle du parent en raison de la marge, les rembourrages et les paramètres de bordure.

Le vert de zone de texte est comme un style de la div à l'aide de position: absolute. Cela fonctionne comme un rêve dans les navigateurs webkit mais nulle part ailleurs.

La div rouge est le contrôle - je veux l'entrée de loi juste comme ça.

Sont là tous les hacks/trucs que je peux utiliser pour avoir mon saisies de texte agissent comme le rouge div dans tous les navigateurs modernes, en d'autres termes, l'ajustement à l'intérieur de la marge de la société mère? Merci d'éditer mon Violon ou créer votre propre pour accompagner votre réponse. Merci!

InformationsquelleAutor Hubro | 2012-07-30

26

Vous pouvez:
```
input#classic
{
    width: 100%;
    padding: 5px;
    margin: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;        
}
```
JS Fiddle démo.

Remarque j'ai enlevé le margin, puisque c'était à l'origine un dépassement de capacité, et de définir la box-sizing pour déterminer la largeur de l'élément y compris la largeur de la bordure et remplissage.
- Quand j'ai faux la marge à l'aide de la mère de la propriété padding c'est en fait un complètement solution viable. +1 Merci pour la réponse
- Vous êtes le bienvenu; je suis heureux de vous avoir été utile! =)
- cette réponse devrait avoir plus de thumbs up! Merci!!
InformationsquelleAutor David Thomas
2

À l'aide de calc pour compenser la marge et box-sizing pour le rembourrage
```
input#classic
{
    padding: 5px;
    margin: 5px;
    width: -webkit-calc(100% - 10px);
    width: -moz-calc(100% - 10px);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}
```
VIOLON
- Cela semble être la correct la solution, mais malheureusement prise en charge du navigateur est toujours défaut. Aussi votre exemple ne fonctionne pas dans FireFox pour une raison quelconque.
- ajouté -moz préfixes pour qu'il fonctionne dans firefox
- Dommage qu'il n'est pas pris en charge dans l'Opéra si
InformationsquelleAutor Musa
0

Essayer avec display:table-cell propriété
```
  display:table;
  display:table-cell;
```
peut-il vous aider à

veuillez consulter ce lien

Le Style de l'élément d'entrée pour remplir restant de la largeur de son conteneur

InformationsquelleAutor Prashobh

Vous devez vous connecter pour publier un commentaire.