在同一行内，有一个中心元素和最右边的元素

Question

我曾将问题发布到http://doctype.com/within-same-line-have-center-element-right-most-element，但没有得到很好的答案。我贴在这里，希望能获得良好的反馈;）

<div style="float:right"> 
    right most, same line as hello world and will not push hello world! 
</div> 

<div style="text-align:center">hello world</div> 

目前，最右边的元素，从页面的中心推动的“hello world”出来的。我怎样才能避免这种情况？

我希望

• 你好世界仍处于中心
• 正确的元素仍然是同一条线上世界，你好
• 正确的元素是在最右边的
• 都是顶最

谢谢。

我尝试了一些别人的建议，但它不会工作。

<div style="text-align:center; width:100%;"> 
    Hello World 
    <div style="float:right">right most, same line as hello world and will not push hello world!</div> 
    <div style="clear:both"></div> 
</div> 

对于上面的代码，我测试了IE8。它们不会在同一行。我用firefox 3.6.8进行了测试，“Hello World”会被右侧的元素向左推。

Answer 1

上的最右边的div内含div和position:absolute; right:0px; top:0px;使用position:relative：

<div style="text-align:center; width:100%; position:relative;"> 
    Hello World 
    <div style="right:0px; top:0px; position:absolute;">right most, same line as hello world and will not push hello world!</div> 
    <div style="clear:both"></div> 
</div> 

当position:relative使用，任何绝对定位元素内被偏移到该相对定位祖先。有关更多示例，请参见this blog post。

演示 - http://jsbin.com/itene

Answer 2

试试这个：

<div style="text-align:center; width:100%;"> 
    <div style="float:left; margin-left:400px;">Hello World </div> 
    <div style="float:right">right most, same line as hello world and will not push hello world!</div> 
    <div style="clear:both"></div> 
</div> 

See the DEMO here.

你可能想在hello world div来调整margin-left值。

Answer 3

指定居中DIV和使用位置的线高度：用于所述第二相对：

<div style="text-align:center; line-height: 50px;">hello world</div> 
<div style="line-height: 50px; position: relative; top: -50px; float:right; z-index: 1"> 
    right most, same line as hello world and will not push hello world! 
</div>