4

我有一个页面，我需要一段文本显示为与绝对定位元素的左上角对齐（跨度，如果重要的话），以及一个按钮显示为与同一元素的右上角对齐。 编辑：问题是即使我使用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>
4

2 回答 2

5

希望我理解正确。

<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/）。通过这种方式，我认为您不需要明确设置文本或按钮的宽度。

于 2009-07-13T15:10:00.110 回答
1

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

于 2009-07-13T15:05:13.080 回答