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

我真的不想为此而采用表格。是否有更简单的方法呢？谢谢能帮助我的任何人。

- user

---

什么东西应该贯穿整个页面？似乎“返回顶部”按钮和其他详细信息部分已经在横跨页面宽度的同一“行”上。除了元素的边距/填充之外。 - opello

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>

- opello

---

非常感谢！这完美地解决了问题！很抱歉一开始没有说明。我随时都可能睡着，只是想尽快完成这个任务。非常感谢你。 - user

Answer 2

我是这样做的：

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

棘手的部分是您必须将两个元素的顶部和底部边距以及行高都归零。如果这样做，那么在底部元素上向右浮动就会对齐。

- Anthony

Answer 3

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

Sinan。

- Sinan