Как разместить элемент в тегах заголовка (H1, H2 и т. Д.)?

Question

Кажется, это должно быть что-то легкое, но это сводит меня с ума !!

Мне нужно иметь возможность расположить кнопку или другой элемент ввода в этом отношении справа от элемента заголовка, который также содержит текст.

Основная разметка:

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

Желаемый результат заключается в том, что текст «Детали заказа» находится слева от элемента H3, а кнопка - справа. Очевидным решением является добавление align: right к кнопке, однако это приводит к тому, что кнопка появляется за пределами элемента H3 или не находится внутри текста.

Я пробовал различные комбинации свойства position элемента H3 и обтекания текста тегами div и span.

Я уверен, что удару себя, когда получу решение этого вопроса.

Редактировать / Update: Я придерживаюсь ответа Никфа (пока что так или иначе), так как имею дело с довольно старой системой с H3, уже стилизованной во внешней таблице стилей, включая цвет фона и т. Д. Есть также много примеров использования тега H3 без дальнейшего элементы, вложенные в него, и для меня не имеет смысла иметь тег div, повторяющий стиль тега H3, чтобы приспособиться к этому.

Если бы я начинал с нуля, я мог бы подумать над ответом Марка.

Answer 1

Вы должны поставить это на первое место

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

Answer 2

Это не совместимо с w3c?

Не могли бы вы обернуть все это в div,

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

И применить ваши стили к div, а не к h3, если вам нужна какая-то форма униформы? Перемещайте h3 влево или используйте display:inline, чтобы они отображались рядом.

Answer 3

Что ж, вот чем я закончил после того, как вдохновился Марком и Ником Ф. Это немного круто, но больше привлекает мою чувствительность. H3 все еще является родительским элементом, что для меня имеет больше смысла, по крайней мере, семантически.

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

Стили, очевидно, должны оказаться в таблице стилей.

Недостаток этого подхода более заметен, чем отвечает Ник, но не более, чем у Марка. Кроме того, есть небольшой клочок - поставить неразрывный пробел в качестве финального персонажа в h3.