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

Question

我有一个页面，我需要在其中显示一段文本以使其与绝对定位的元素的左上角对齐（如果有跨度，则应如此），以及一个按钮以与同一元素的右上角对齐。 编辑：问题是什至当我使用float: right;并且display: inline;按钮仍然喜欢放下一行时。

当前，我的解决方案是使用span元素包装按钮，将span浮动到右侧，然后将按钮设置为绝对位置。问题在于，除非我手动指定包装器跨度的宽度以适合浏览器呈现按钮的任何大小，否则它不会出现。有点傻

正确的方法是什么？

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

Answer 1

希望我理解正确。

<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/）。这样，我认为您无需显式设置文本或按钮的宽度。