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

问题描述

我有一个页面，我需要一段文字出现对准绝对定位的元素左上角（跨度，如果它很重要），和一个按钮显示排列在同一单元的右上角。 修改：当我用这个问题甚至浮动：权利; 和显示：内联; 按钮仍然喜欢砸下一行。

目前我的解决办法是换按钮，跨度元素，浮动范围在右边，然后设置按钮的绝对位置。这个问题，除非我的是它不会出现手动的指定包装跨度的宽度以适应任何大小的浏览器呈现的按钮。这是有点愚蠢。

什么是正确的方式做到这一点？

修改2：这是我原来的code：

 的#header
{
位置：绝对的;
顶部：0;
底部：自动;
左：0;
宽度：100％;
高度：24PX;
溢出：隐藏;
}


/ *头的按钮。 * /
的#header＆GT;跨度
{
浮动：权利;
宽度：100像素;
}
的#header＆GT;跨度＆GT;钮
{
位置：绝对的;
}
 

和HTML：

 ＆LT;跨度ID =头＆GT;
触发编辑器
＆LT;跨度＆GT;＆LT;按钮式=按钮ID =h_output＆GT;输出触发＆LT; /按钮＆GT;＆LT; / SPAN＆GT;
＆LT; / SPAN＆GT;
 

解决方案

希望我理解正确的。

 ＆LT; D​​IV CLASS =clearfix＆GT;
  ＆LT; D​​IV的风格=浮动：左＆GT;文字＆lt; / DIV＆GT;
  ＆LT; D​​IV的风格=浮动：权利＆GT;按钮和LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

在哪里clearfix是有名的一个（的http://www.456bereastreet.com/archive/200603/new_clearing_method_needed_for_ie7/).通过这种方式，我不认为你需要明确地设置文本或按钮的宽度。

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.

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.

What's the proper way to do this?

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;
}

And the HTML:

<span id="header">
	Trigger editor
	<span><button type="button" id="h_output">Output Triggers</button></span>
</span>

解决方案

Hope I understood correctly.

<div class="clearfix">
  <div style="float:left">Text</div>
  <div style="float:right">Button</div>
</div>

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屋！