¿Cómo se posiciona un elemento dentro de las etiquetas de Encabezado (H1, H2, etc.)?

Question

Parece que debería ser algo fácil, ¡pero me está volviendo loco!

Necesito poder colocar un botón u otro elemento de entrada a la derecha de un elemento de encabezado, que también contiene texto.

El margen básico es:

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

El resultado deseado es que el texto "Detalles" está a la izquierda del elemento H3 y el botón está en la derecha. La solución obvia es agregar alinear: directamente al botón, sin embargo, esto hace que el botón aparezca fuera del elemento H3 o no en línea con el texto.

He intentado varias combinaciones de la propiedad de posición en el elemento H3 y envolviendo el texto en etiquetas div y span.

Estoy seguro de patearme cuando obtengo la solución a esto.

Editar/actualización: estoy pegando con la respuesta de nickf (al menos por ahora) como yo estoy tratando con todo un sistema antiguo con el H3 ya labrada en la hoja de estilo externa, incluyendo color de fondo etc. También hay muchas instancias de la etiqueta H3 que se usa sin elementos adicionales anidados en ella y para mí no tiene sentido tener una etiqueta div que replique el estilo de la etiqueta H3 para acomodar esto.

Si estuviera empezando desde cero podría haber considerado la respuesta de Mark.

Answer 1

usted tiene que poner primero

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

Answer 2

eso no es compatible con W3C es?

No se puede concluir que todo el asunto en un div,

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

Y aplicar los estilos a la div, en lugar de la h3 si necesita algún tipo de uniforme mira? Desplace el h3 hacia la izquierda o use display:inline para que aparezcan uno al lado del otro.

Answer 3

Bueno, esto es lo que he terminado después de haber sido inspirado por Mark y Nick F. Es un poco difícil, pero atrae a mis sensibilidades más. El h3 sigue siendo el elemento padre, que para mí tiene más sentido, al menos semánticamente.

<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> 

Los estilos obviamente deberían terminar en la hoja de estilos.

La desventaja de este enfoque es más marcado, que la respuesta de Nicks pero no más que la de Mark. También existe la pequeña posibilidad de poner un espacio sin romper como el personaje final en el h3.