Comment puis-je positionner un élément dans les balises de titre (H1, H2, etc.)?

Question

Cela semble être quelque chose de facile, mais ça me rend fou!

Je dois être en mesure de positionner un bouton, ou un autre élément d'entrée d'ailleurs à la droite d'un élément d'en-tête, qui contient également du texte.

Le balisage de base est:

<h3>Order Details <input type="button" value="Refund" id="btnRefund" /></h3> 

Le résultat souhaité est que le texte « Détails de la commande » est à gauche de l'élément H3 et le bouton est à droite. La solution évidente consiste à ajouter align: right au bouton, mais cela fait apparaître le bouton en dehors de l'élément H3 ou non en ligne avec le texte.

J'ai essayé diverses combinaisons de propriétés de position sur l'élément H3 et d'envelopper le texte dans les balises div et span.

Je suis sûr que je me botte quand j'aurai la solution.

Modifier/Mise à jour: Je coller avec la réponse de nickf (pour l'instant en tout cas) que je traite tout un ancien système avec le H3 déjà appelée dans la feuille de style externe, y compris la couleur d'arrière-plan, etc. Il y a aussi de nombreuses instances de l'étiquette H3 étant utilisées sans aucun élément supplémentaire imbriqué dans celle-ci et pour moi, cela n'a pas de sens d'avoir une étiquette div qui reproduit le style de l'étiquette H3 pour accommoder ceci.

Si je partais de zéro, j'aurais pu considérer la réponse de Mark.

Answer 1

Vous devez le mettre d'abord

<h3><input type="button" style="float: right">Order Details</h3> 

Answer 2

Ce n'est pas conforme à w3c est-il?

Ne peut pas vous envelopper le tout dans une div,

<div><h3>Order Details</h3><input type="button" value="Refund" id="btnRefund" /></div> 

Et appliquer vos styles à la div, plutôt que h3 si vous avez besoin d'une forme d'uniforme regarder? Faites flotter le h3 à gauche ou utilisez display:inline pour qu'ils apparaissent côte à côte.

Answer 3

Eh bien voici ce que j'ai fini avec après avoir été inspiré par Mark et Nick F. C'est un peu un kludge mais fait appel à mes sensiblities plus. Le h3 est toujours l'élément parent, ce qui pour moi a plus de sens, au moins sémantiquement.

<h3 style="position:relative;"> 
    <span style="position:absolute;">Order Details</span> 
    <span style="text-align:right; 
       width:100%; 
       position:absolute"> 
     <input type="submit" name="btnRefund" value="Refund" id="btnRefund" 
     class="TextFields" /></span></h3> 

Les styles doivent évidemment se retrouver dans la feuille de style. L'inconvénient de cette approche est plus important que la réponse de Nicks, mais pas plus que celle de Mark. Il y a aussi le petit kludge de mettre un espace non brisé comme le dernier caractère de la h3.