这似乎应该是容易的东西,但它让我疯了!
我需要能够将一个按钮或其他输入元素放置在header元素的右侧,该元素也包含文本.
基本标记是:
<h3>Order Details <input type="button" value="Refund" id="btnRefund" /></h3>
所需的结果是文本"订单详细信息"位于H3元素的左侧,按钮位于右侧.显而易见的解决方案是在按钮上添加align:right,但这会导致按钮出现在H3元素之外或不与文本内联.
我尝试了H3元素上的position属性的各种组合,并将文本包装在div和span标签中.
当我得到解决方案时,我确定我会自己踢.
编辑/更新: 我坚持使用nickf的答案(现在无论如何),因为我正在处理相当旧的系统,H3已经在外部样式表中设置了样式,包括背景颜色等.还有很多H3标签的实例使用时没有嵌套在其中的任何其他元素,对我而言,使用div标签复制H3标签的样式以适应这种情况是没有意义的.
如果我从头开始,我可能会考虑马克的答案.
你必须把它放在第一位
<h3><input type="button" style="float: right">Order Details</h3>
那不符合w3c吗？
难道你不能将整个东西包裹在一个div中,
<div><h3>Order Details</h3><input type="button" value="Refund" id="btnRefund" /></div>
如果你需要某种形式的统一外观,你可以将你的风格应用到div而不是h3吗？将h3向左漂浮或使用,display:inline使它们并排出现.