如何在標題（H1、H2 等）標簽中定位元素？

Question

這看起來應該很簡單，但它讓我發瘋！！

我需要能夠將一個按鈕或其他輸入元素定位在標題元素的右側，標題元素也包含文本。

基本標記是：

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

期望的結果是文本“Order Details”在 H3 元素的左側，按鈕在右側。 顯而易見的解決方案是向按鈕添加 align:right ，但是這會導致按鈕出現在 H3 元素之外或不與文本內聯。

我嘗試了 H3 元素上 position 屬性的各種組合，並將文本包裝在 div 和 span 標簽中。

當我得到解決方案時，我敢肯定我會踢自己。

編輯/更新：我堅持使用 nickf 的答案（無論如何現在），因為我正在處理一個相當舊的系統，其中 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

嗯，這就是我在受到 Mark 和 Nick F 的啟發后得到的結果。這有點雜亂無章，但更能吸引我的感性。 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 中放置一個不間斷空格作為最后一個字符也是一個小問題。