Comment puis-je obtenir la div <form> pour envelopper correctement mes deux boutons <input type = "button">?

Pour une raison quelconque mon Soumettre et Annuler boutons ne sont pas enveloppés dans la balise form comme je les attends à être (en fonction de leur position dans la balise de formulaire dans le HTML) quand je leur float propriété définie sur à droite et gauche respectivement. Les deux boutons sont positionnés juste à l'extérieur & sous la forme div à l'extrême droite & côtés gauche.Comment puis-je obtenir la div <form> pour envelopper correctement mes deux boutons <input type = "button">?

Lien vers le HTML & embedded CSS

alt text http://lh5.ggpht.com/_rNlSpSUBkYo/TFLpNgv4XkI/AAAAAAAAAE8/ocwa0uSzwX4/reply-float-form.png

Comment puis-je faire de sorte que la forme div enveloppe les deux boutons afin qu'ils ne semblent pas à l'extérieur & en dessous du formulaire div?

Merci
Adam

Source

2010-07-30 Anonymous

Pour votre information - afin de rester valide, vous ne devriez pas dupliquer les ID d'élément. Si vous voulez que les choses aient le même style, utilisez des classes. En outre, vous pouvez utiliser plusieurs noms de classe, par exemple. class = "boutons soumettre". Vous pouvez cibler cet élément en utilisant .buttons, .submit ou .buttons.submit (sans espace). – Khan

On dirait que vous devez effacer les flotteurs. Essayez ceci.

<form action="#" method="get"> 
    <textarea name="Reply Textarea" type="text" rows="2" cols="40" wrap="soft"></textarea> 
    <input id="buttons" class="submit" type="submit" value="Submit" /> 
    <input id="buttons" class="cancel" type="button" value="Cancel"> 
    <br style="clear: both;" /> 
</form>

Source

2010-07-30 14:52:42

Oui, ça va le faire. La raison pour laquelle les éléments flottants doivent être effacés est que dès que vous faites flotter quelque chose, il n'interagit plus avec son conteneur parent (à moins qu'il ne soit également flottant) ou tout autre élément non flottant plus bas dans le balisage. La compensation arrête cela. – Pat

Je veux juste m'assurer que je comprends pourquoi cela se passe et/ou s'il s'agit d'un bug CSS que je rencontre. –

Non ce n'est pas un bogue CSS, c'est par définition. Voir le commentaire de Pat ci-dessus. –

Retirez la règle de flotteur de .cancel:

.cancel{/* no float */}

* testé sur Chrome

Source

2010-07-30 14:56:34 tcooc

oui cela ne fonctionne pas. pouvez-vous expliquer pourquoi cela fonctionne comme ça? la logique ne dit-elle pas que cela devrait fonctionner avec les deux boutons ayant leurs flotteurs réglés? ou est-ce que placer un float: left est déjà un comportement inné d'un item non flottant et ça le surclasse juste pour l'inclure? –

donnant un flottant: le style gauche/droite retire l'élément de la "boîte", lui faisant perdre des styles hérités. La suppression du style 'float: left' place l'élément dans la" boîte "et couvre aussi l'élément' float: right'. – tcooc

Comment puis-je obtenir la div <form> pour envelopper correctement mes deux boutons <input type = "button">?

Répondre

Questions connexes