Puis-je empêcher les zones de texte 100% de largeur de s’étendre au-delà de leurs conteneurs?

Disons que j’ai une zone de texte que je veux remplir toute une ligne. Je lui donnerais un style comme celui-ci:

input.wide {display:block; width: 100%} 

Cela pose des problèmes car la largeur est basée sur le contenu de la zone de texte. Les zones de texte ont des marges, des bordures et un remplissage par défaut, ce qui rend une zone de texte d’une largeur de 100% plus grande que son conteneur.

Par exemple, ici à droite:

entrer la description de l'image ici

Est-il possible de faire une zone de texte remplir la largeur de son conteneur sans la développer?

Voici un exemple de HTML pour montrer ce que je veux dire:

    Untitled Page  #outer{border: 1px solid #000; width: 320px; margin: 0px;padding:0px} #inner{margin: 20px; padding: 20px; background: #999;border: 1px solid #000;} input.wide {display:block; margin: 0px} input.normal {display:block; float: right}    

Si cela est exécuté, vous pouvez voir en regardant la zone de texte “normal” que la zone de texte “large” dépasse le conteneur. La zone de texte “normale” flotte sur le bord réel du conteneur. J’essaie de faire en sorte que la zone de texte “large” remplisse son conteneur, sans étendre le contour comme le fait la zone de texte “normale”.

Ce que vous pouvez faire est de supprimer les “extras” par défaut sur l’ input :

 input.wide {display:block; width:100%;padding:0;border-width:0} 

Cela gardera l’ input dans son conteneur. Maintenant, si vous voulez les bordures, encapsulez l’ input dans un div , avec les bordures définies sur le div (de cette façon, vous pouvez supprimer l’ display:block partir de l’ input ). Quelque chose comme:

 

Edit: Une autre option consiste à, au lieu de supprimer le style de l’ input , de le compenser dans le div enveloppé:

 input.wide {width:100%;} 

Cela vous donnera des résultats quelque peu différents dans les différents navigateurs, mais ils ne chevaucheront pas le conteneur. Les valeurs dans le div dépendent de la taille de la bordure sur l’ input et de l’espace requirejs entre l’ input et la bordure.

Est-il possible de faire une zone de texte remplir la largeur de son conteneur sans la développer?

Oui: en utilisant la propriété CSS3 ‘box-sizing: border-box’, vous pouvez redéfinir ce que signifie «width» pour inclure le remplissage externe et la bordure.

Malheureusement, parce que c’est CSS3, le support n’est pas très mature et comme le processus de spécification n’est pas encore terminé, il a des noms temporaires différents dans les navigateurs. Alors:

 input.wide { width: 100%; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } 

L’ancienne alternative consiste simplement à mettre une quantité de ‘padding-right’ sur l’élément

ou

qui contient un nombre de padding / bordure supplémentaire de gauche à droite. donner l’entrée. (Typiquement 6px pour IE <8.)

Cela a résolu le problème pour moi!

Sans la nécessité d’un div externe. Appliquez-le simplement à votre zone de texte donnée.

 box-sizing: border-box; 

Avec cette propriété “Les propriétés width et height (et propriétés min / max) incluent le contenu, le remplissage et la bordure, mais pas la marge”

Voir la description de la propriété chez w3schools .

J’espère que cela aide quelqu’un!

Je suis tombé sur ce problème moi-même, et la seule solution que je pouvais trouver qui fonctionnait dans tous mes navigateurs de test (IE6, IE7, Firefox) était la suivante:

  1. Envelopper le champ de saisie dans deux DIV distinctes
  2. Définir la DIV externe à la largeur 100%, cela empêche notre conteneur de déborder le document
  3. Placer le remplissage dans le DIV interne du montant exact pour compenser le débordement horizontal de l’entrée.
  4. Définissez un remplissage personnalisé sur l’entrée afin qu’il déborde de la même quantité que ce que je permettais dans la DIV interne

Le code:

 

Ici, le débordement horizontal total pour l’élément d’entrée est 6px – 2x (padding + border) – nous définissons donc un padding-right pour le DIV interne de 6px.

la prise en charge de la taille des boîtes est en fait très bonne: http://caniuse.com/#search=box-sizing

Donc, à moins de cibler IE7, vous devriez être capable de résoudre ce type de problèmes en utilisant cette propriété. Une couche telle que sass ou less facilite la gestion des règles préfixées comme celle-ci, btw.

En fait, c’est parce que CSS définit 100% par rapport à la largeur totale du conteneur, y compris ses marges, ses bordures et son remplissage; cela signifie que l’espace est disponible. à son contenu est une quantité inférieure à 100%, sauf si le conteneur n’a pas de marges, de bordures ou de remplissage.

Ceci est contre-intuitif et considéré par beaucoup comme une erreur avec laquelle nous sums maintenant coincés . Cela signifie que les dimensions en% ne sont efficaces que pour un conteneur de niveau supérieur, et même dans ce cas, uniquement s’il n’y a pas de marges, de bordures ou de bourrages.

Notez que les marges, les bordures et le remplissage du champ de texte sont inclus dans la taille CSS spécifiée – c’est le conteneur qui jette les éléments.

J’ai contourné le problème en utilisant 98%, mais cette solution est loin d’être parfaite, car les champs d’entrée ont tendance à être encore plus courts à mesure que le conteneur s’agrandit.


EDIT: Je suis tombé sur cette question similaire – je n’ai jamais essayé la réponse donnée, et je ne sais pas avec certitude si cela s’applique à votre problème, mais il semble que ce soit le cas.

Une solution qui peut fonctionner (cela fonctionne pour moi) est d’appliquer une marge négative en entrée (zone de texte) … ou une largeur fixe pour ie7 ou de supprimer le support ie7. Il en résulte une largeur de pixel parfaite .. Pour moi, il a ajouté 7, donc 3 et 4, mais il est toujours parfait pour les pixels.

J’ai eu le même problème et je détestais avoir des div supplémentaires pour la frontière, etc.

Alors voici ma solution qui semble fonctionner!

Vous devez utiliser une feuille de style avec seulement 7 pour éviter les astuces.

 input.text{ background-color: #fbfbfb; border : solid #eee 1px; width: 100%; -box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; height: 32px; *line-height:32px; *margin-left:-3px; *margin-right:-4px; display: inline; padding: 0px 0 0 5px; } 

Si vous ne pouvez pas utiliser box-sizing:border-box vous pouvez essayer de supprimer la width:100% et de mettre un atsortingbut de size très importante dans l’élément . L’inconvénient est que vous devez modifier le code HTML faites-le avec CSS uniquement:

  

Si vous n’avez pas besoin de le faire de manière dynamic (par exemple, votre formulaire a une largeur fixe), vous pouvez simplement définir la largeur des éléments enfants sur la largeur de leur conteneur, moins les décorations telles que padding, margin, etc.:

  // the parent div here has a width of 200px: .form-signin input[type="text"], .form-signin input[type="password"], .form-signin input[type="email"], .form-signin input[type="number"] { font-size: 16px; height: auto; display: block; width: 280px; margin-bottom: 15px; padding: 7px 9px; } 

Si vous ne pouvez pas utiliser la taille des boîtes (par exemple, lorsque vous convertissez du HTML en PDF en utilisant iText). Essaye ça:

CSS

 .input-wrapper { border: 1px solid #ccc; padding: 0 5px; min-height: 20px; } .input-wrapper input[type=text] { border: none; height: 20px; width: 100%; padding: 0; margin: 0; } 

HTML

 

Cela marche:

 

La première largeur est une règle de secours pour les navigateurs plus anciens.

Il suffit de mettre en forme l’entrée à décaler pour le remplissage supplémentaire. Dans l’exemple suivant, le remplissage de l’entrée est 10px à gauche et à droite pour un décalage total de 20px:

 input[type=text]{ width: calc(100% - 20px); }