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

Question

首先，我知道有一些方法可以让文本位于同一行。但我不确定如何扩展这一点。这是我目前所拥有的:

我怎样才能让它在不使用表格的情况下一直运行下去？

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

我真的不想为此求助于表格。有更容易的方法吗。谢谢任何能帮助我的人。

Answer 1

这与您开始的内容有点不同，但我过去就是这样做的:

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>