Question

这看起来应该很容易，但却让我发疯了！

我需要能够将一个按钮或其他输入元素放在标题元素的右侧，标题元素也包含文本。

基本标记是：

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

所需的结果是文本“订单详细信息”位于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

这就是我在受到马克和尼克F的启发后最终得到的结果。这是一个有点像kludge，但更多地吸引我的敏感性。 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中的最后一个角色。

如何将元素定位在标题（H1，H2等）标记内？

3 个答案: