J'ai une entrée html.
L'entrée a padding: 5px 10px;
Je veux que ce soit 100% de la largeur de la div parent (qui est fluide).
Cependant, l'utilisation de width: 100%;
l'entrée 100% + 20px
permet de contourner ce problème.
input
et supporte IE7
J'ai une entrée html.
L'entrée a padding: 5px 10px;
Je veux que ce soit 100% de la largeur de la div parent (qui est fluide).
Cependant, l'utilisation de width: 100%;
l'entrée 100% + 20px
permet de contourner ce problème.
input
et supporte IE7
Réponses:
box-sizing: border-box
est un moyen rapide et facile de le réparer:
Cela fonctionnera dans tous les navigateurs modernes et IE8 +.
Voici une démo: http://jsfiddle.net/thirtydot/QkmSk/301/
.content {
width: 100%;
box-sizing: border-box;
}
Les versions préfixées du navigateur ( -webkit-box-sizing
, etc.) ne sont pas nécessaires dans les navigateurs modernes.
C'est pourquoi nous avons box-sizing
en CSS.
J'ai édité votre exemple, et maintenant cela fonctionne dans Safari, Chrome, Firefox et Opera. Vérifiez-le: http://jsfiddle.net/mathias/Bupr3/ Tout ce que j'ai ajouté était ceci:
input {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Malheureusement, les navigateurs plus anciens comme IE7 ne le prennent pas en charge. Si vous recherchez une solution qui fonctionne dans les anciens IE, consultez les autres réponses.
Utilisez également le rembourrage en pourcentages et supprimez de la largeur:
rembourrage: 5%; largeur: 90%;
Vous pouvez le faire sans utiliser box-sizing
et pas des solutions claires comme width~=99%
.
padding
etborder
margin
= border-width
+horizontal padding
padding
égal à celui margin
de l'étape précédenteBalisage HTML:
<div class="input_wrap">
<input type="text" />
</div>
CSS:
div {
padding: 6px 10px; /* equal to negative input's margin for mimic normal `div` box-sizing */
}
input {
width: 100%; /* force to expand to container's width */
padding: 5px 10px;
border: none;
margin: 0 -10px; /* negative margin = border-width + horizontal padding */
}
Utilisez css calc ()
Super simple et génial.
input {
width: -moz-calc(100% - 15px);
width: -webkit-calc(100% - 15px);
width: calc(100% - 15px);
}
Comme vu ici: largeur Div 100% moins quantité fixe de pixels
Par webvitaly ( https://stackoverflow.com/users/713523/webvitaly )
Source originale: http://web-profile.com.ua/css/dev/css -largeur-100prc-moins-100px /
Je viens de le copier ici, car je l'ai presque manqué dans l'autre fil.
En supposant que je suis dans un conteneur avec un rembourrage de 15 pixels, c'est ce que j'utilise toujours pour la partie intérieure:
width:auto;
right:15px;
left:15px;
Cela étirera la partie intérieure à n'importe quelle largeur, elle devrait être inférieure aux 15 pixels de chaque côté.
width:auto
application à un input
champ?
Vous pouvez essayer quelques astuces de positionnement. Vous pouvez mettre l'entrée dans un div avec position: relative
et une hauteur fixe, puis sur l'entrée avoir position: absolute; left: 0; right: 0;
et n'importe quel rembourrage que vous aimez.
<input>
éléments de Firefox (idk sur IE). Cela fonctionne avec <div>
s, cependant. Et non, display: block
sur le <input>
ça ne marche pas non plus: - /
Voici la recommandation de codeontrack.com , qui contient de bons exemples de solutions:
Au lieu de définir la largeur de la div à 100%, réglez-la sur auto et assurez-vous que la valeur
<div>
est définie sur display: block (par défaut pour<div>
).
Déplacez le remplissage de la zone de saisie vers un élément wrapper.
<style>
div.outer{ background: red; padding: 10px; }
div.inner { border: 1px solid #888; padding: 5px 10px; background: white; }
input { width: 100%; border: none }
</style>
<div class="outer">
<div class="inner">
<input/>
</div>
</div>
Voir l'exemple ici: http://jsfiddle.net/L7wYD/1/
Comprenez simplement la différence entre la largeur: auto; et largeur: 100%; Largeur: auto; calculera (AUTO) MATICALEMENT la largeur afin de correspondre exactement à la valeur indiquée avec la div de l'emballage, y compris le rembourrage. La largeur de 100% élargit la largeur et ajoute le rembourrage.
Qu'en est-il de l'emballage dans un récipient. Le conteneur doit avoir un style comme:
{
width:100%;
border: 10px solid transparent;
}
Essaye ça:
width: 100%;
box-sizing: border-box;
Pour moi, en utilisant margin:15px;padding:10px 0 15px 23px;width:100%
, le résultat était le suivant:
La solution pour moi était d'utiliser width:auto
au lieu dewidth:100%
. Mon nouveau code était:
margin:15px;padding:10px 0 15px 23px;width:auto
. Ensuite, l'élément s'est aligné correctement:
J'ai eu le même problème. Fixez-le comme ceci:
width: 100%;
box-sizing: border-box;