Ce code a un résultat différent dans Firefox et Chromeastuce Ancrages ne fonctionne pas dans Firefox
<div style="border:1px solid red; width:50%; height:50px; position:relative;">
<input type="text" style="position:absolute; left:0; right:20px;" />
</div>
Comment faire de la zone de texte ancré 0px à gauche et 20px sur le côté droit de le div?
REMARQUE: la largeur de div doit être de 50%.
Merci :)
<div style="border:1px solid red; width:50%; height:50px; position:relative;">
<div style="position:absolute; left:0; right:20px;">
<input type="text" style="width: 100%" />
</div>
</div>
<input> se conduit mal dans certains navigateurs, l'envelopper dans un div
Que fais-tu dans le monde avec cette div supplémentaire? Retirez-le maintenant avant de vous tirer dessus. –
^Ce qu'il a dit. ' –
' 'ne se comporte pas comme un élément de bloc normal avec à la fois' left: 'et' right: 'défini en même temps dans FF, mais il comprend' width: 100% '. Si vous avez une meilleure solution, voyons-le :) – Knio
Débarrassez-vous de left:0;
<div style="border:1px solid red; width:50%; height:50px; position:relative;">
<input type="text" style="position:absolute; right:20px;" />
</div>
je suis désolé, je veux ancré 0px à gauche ainsi –
"Comment faire de la zone de texte ancré 20px sur le côté droit de la div?" Soit je ne comprends pas ce que vous voulez dire par là, ou l'exemple fonctionne parfaitement bien.
quel navigateur avez-vous utilisé? ça ne marche pas dans Firefox. –
Que diriez-vous à l'aide box-sizing sur l'extérieur <div>? De cette façon, vous pouvez éviter d'ajouter un montant supplémentaire de celui-ci:
<div style="border:1px solid red; width:50%; height:50px; position:relative; padding-right:20px; box-sizing:border-box;">
<input type="text" style="width:100%;" />
</div>
Bien sûr, cela ne serait applicable si vous ne me dérange pas d'ajouter le rembourrage à l'extérieur <div> ...
à 4,0 FF Testée & Chrome 10.0
Est-ce que le champ de saisie doit s'adapter au conteneur ou juste être ancré à 20px par la droite? – Kevin