HTML/CSS - 右对齐和左对齐在同一行上？

首先，我知道有一些方法可以使文本处于同一行。但我不确定如何延续这一点。这是我到目前为止有：HTML/CSS - 右对齐和左对齐在同一行上？

Should be all the way across http://i33.tinypic.com/64i4uo.jpg

我怎么能够让它如此这般所有的方式，而不使用表？

这是HTML部分：

<p style="float: left;" class="details"><a href="#Top">To Top</a></p> 
<p style="float: right" class="details">Latest Version: 0.3.6.17 | Downloads: 12 | <a href="#">Download</a></p>

这是CSS部分：

.details { 
padding: 7px 15px; 
margin: 20px 15px 15px 15px; 
background: #111111;  
}

，我真的很讨厌不得不求助于此表。有更容易的方法吗。谢谢任何能够帮助我的人。

来源

2009-10-28 user

应该是什么一路走过去？看起来好像'To Top'和其他细节部分已经在跨越页面宽度的相同“行”上。除了你的边缘/填充的元素。 – opello 2009-10-28 20:05:59

我的意思是灰色的背景。 – user 2009-10-28 20:13:07

这发散了一下，从你开始用什么，但我是如何在过去已经做过这样的：

CSS：

.details { 
    clear: both; 
    padding: 7px 15px; 
    margin: 20px 15px 15px 15px; 
    background: #111111; 
    text-align: right; 
} 

.toplink { 
    float: left; 
}

HTML：

<div class="details"> 
    <span class="toplink">To Top</span> 
    Latest Version: 0.3.6.17 | Downloads: 12 | Download 
</div>

来源

2009-10-28 20:28:17 opello

非常感谢你！这很好用！我很抱歉没有从头说明。我马上就要睡着了，我只想把这件事情完成并且结束。非常感谢你。 – user 2009-10-28 20:32:02

将display:inline;添加到您的.details类中，并确保包含的div是块元素，并且其背景设置为灰色。

思南。

来源

2009-10-28 20:09:18 Sinan

我就是这么做的：

<style type="text/css"> 
#right { 
    float: right; 
} 

.details { 
    margin: 0 auto; 
    line-height: 0; 
} 
</style> 

<p class="details"><a href="#Top">To Top</a></p> 
<p id="right" class="details">Latest Version: 0.3.6.17 | Downloads: 12 | <a href="#">Download</a></p>

棘手的部分是，你必须零出两个和顶部和底部边缘的行高。如果你这样做，然后漂浮在底部元素上。

来源

2009-10-28 20:17:52 Anthony

没有为我工作.. – user 2009-10-28 20:26:06

它是如何工作的？ – Anthony 2009-10-28 20:42:14

HTML/CSS - 右对齐和左对齐在同一行上？

回答

相关问题