代码之家  ›  专栏  ›  技术社区  ›  Daddy Warbox

简单的CSS问题:标题文本位于左上角,按钮位于右上角

  •  3
  • Daddy Warbox  · 技术社区  · 15 年前

    我有一个页面,我需要一段文本显示在绝对定位元素的左上角(一个跨度,如果重要的话),以及一个按钮显示在同一元素的右上角。 编辑: 这方面的问题是即使我使用 float: right; display: inline; 按钮仍然喜欢放下下一行。

    目前我的解决方案是用一个跨度元素包装按钮,将跨度向右浮动,然后将按钮设置为绝对位置。问题是除非我 手动 指定包装跨距的宽度以适合浏览器呈现按钮的任何大小。有点傻。

    正确的方法是什么?

    编辑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>
    
    2 回复  |  直到 15 年前
        1
  •  4
  •   Stefano Verna    15 年前

    希望我理解正确。

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

        2
  •  1
  •   Kon    15 年前

    我相信使用div(而不是跨度)来定位元素的“正确”方法。但是,您必须在左边的浮动DIV上显式地设置宽度,否则它将占用整行(作为一个块元素和所有元素)。只要确保宽度足够显示DIV的所有内容而不溢出即可。