简单的CSS问题：标题文本在左上角，按钮在右上角 [英] Simple CSS problem: Title text on upper left, Button on the upper right

问题描述

我有一个页面，我需要一个文本对齐到一个绝对定位的元素（跨度，如果重要）的左上角和一个按钮出现对齐到相同的元素的右上角。 edit：即使我使用 float：right; 和 display：inline; 按钮仍然喜欢放下一行。

I have a page where I need a piece of text to appear aligned to the upper left of an absolutely positioned element (a span, if it matters), and a button to appear aligned to the upper right of the same element. edit: Problem with this is even when I use float: right; and display: inline; the button still likes to drop the next line.

目前我的解决方案是用一个span元素包装按钮，将span向右浮动，然后设置按钮到绝对位置。问题是，它不会出现，除非我手动指定包装跨度的宽度适合任何浏览器呈现按钮的大小。

Currently my solution is to wrap the button with a span element, float the span to the right, and then set the button to absolute position. Problem with this is it doesn't appear unless I manually specify the width of the wrapper span to fit whatever size the browser renders the button. Which is kinda dumb.

这是什么正确的方法？

编辑2： / strong>这是我的原始代码：

edit 2: Here was my original code:

#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>

推荐答案

希望我能正确理解。

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

Where clearfix is the famous one (http://www.456bereastreet.com/archive/200603/new_clearing_method_needed_for_ie7/). In this way I don't think you need to explicitely set the width of the text or the button.

这篇关于简单的CSS问题：标题文本在左上角，按钮在右上角的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！