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>

Answer 2

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

思南。

Answer 3

我是这样做的：

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

棘手的部分是你必须将两个AND和行高的顶部和底部边距归零。如果你这样做，那么浮动在底部元素上的就行了。