Jak pozycjonować element w nagłówku kursu (H1, H2 itd.)?

Question

Wygląda na to, że powinno być coś łatwego, ale doprowadza mnie to do szału!

Muszę umieć umieścić przycisk lub inny element wejściowy dla tej sprawy po prawej stronie elementu nagłówka, który również zawiera tekst.

Podstawowym znaczników jest:

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

Pożądany wynik jest taki, że tekst „Szczegóły zamówienia” znajduje się na lewo od H3 element i przycisk jest po prawej stronie. Oczywistym rozwiązaniem jest dodanie align: right to the button, jednak powoduje to, że przycisk pojawia się poza elementem H3 lub nie jest wbudowany w tekst.

Próbowałem już różnych kombinacji właściwości position elementu H3 i zawijania tekstu w znacznikach div i span.

Jestem pewien, że kopnę się, gdy otrzymam rozwiązanie tego problemu.

Edycja/Aktualizacja: mam trzymać z odpowiedzią nickf (na teraz tak) jak mam do czynienia z dość starym systemie z H3 już stylizowany na zewnętrznego arkusza stylów w tym kolor tła itp Istnieją również wiele instancji tagu H3 jest używane bez zagnieżdżonych w nim żadnych innych elementów i dla mnie nie ma sensu posiadanie znacznika div replikującego styl znacznika H3, aby to pomieścić.

Gdybym zaczynał od zera, mógłbym rozważyć odpowiedź Marka.

Answer 1

trzeba umieścić go najpierw

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

Answer 2

to nie jest zgodne W3C to jest?

nie można zawinąć całość w div,

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

i zastosować style do div, zamiast h3 jeśli potrzebna jakaś forma mundurze wygląda? Opuść h3 w lewo lub użyj display:inline, aby pojawiły się obok siebie.

Answer 3

Oto, po co zainspirował mnie Mark i Nick F. To trochę kundel, ale bardziej przemawia do moich wrażliwości. H3 jest nadal elementem nadrzędnym, co ma dla mnie sens, przynajmniej semantyczny.

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

Style powinny oczywiście znaleźć się w arkuszu stylów.

Wadą tego podejścia jest więcej oznakowania, niż odpowiedzi Nicks, ale nie bardziej niż Mark. Jest także mała kałuża umieszczania nieroztrącającej się przestrzeni jako ostatecznej postaci w h3.