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的所有内容而不会溢出。

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

2 个答案: