简单的 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/)。这样我认为您不需要明确设置文本或按钮的宽度。

Answer 2

我相信使用 DIV（不是 SPAN）进行元素定位的“正确”方式。但是，是的，您必须在左侧的浮动 DIV 上明确设置宽度，否则它将占用整行（作为块元素和所有元素）。只需确保您的宽度足以显示 DIV 的所有内容而不会溢出。