简单的CSS问题：标题文本在左上角，按钮在右上角

我有一个页面，我需要一段文本与绝对定位元素的左上角对齐（跨度，如果重要的话），以及一个按钮与同一元素的右上角对齐。edit:即使我使用时也会出现问题float: right; and display: inline;该按钮仍然喜欢删除下一行。

目前我的解决方案是用 span 元素包裹按钮，将 span 向右浮动，然后将按钮设置为绝对位置。问题是它不会出现，除非我manually指定包装器跨度的宽度以适合浏览器呈现按钮的任何尺寸。这有点愚蠢。

执行此操作的正确方法是什么？

edit 2:这是我原来的代码：

#header
{
    position: absolute;
    top: 0;
    bottom: auto;
    left: 0;
    width: 100%;
    height: 24px;
    overflow: hidden;
}


/* Header's buttons. */
#header > span
{
    float: right;
    width: 100px;
}
#header > span > button
{
    position: absolute;
}

和 HTML：

<span id="header">
    Trigger editor
    <span><button type="button" id="h_output">Output Triggers</button></span>
</span>

希望我理解正确。

<div class="clearfix">
  <div style="float:left">Text</div>
  <div style="float:right">Button</div>
</div>

其中clearfix是著名的（http://www.456bereastreet.com/archive/200603/new_clearing_method_needed_for_ie7/ http://www.456bereastreet.com/archive/200603/new_clearing_method_needed_for_ie7/）。这样我认为您不需要显式设置文本或按钮的宽度。