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

Я сделал это так:

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

Сложность в том, что вам нужно обнулить верхнее и нижнее поля как для высоты строки, так и для нее. Если вы сделаете это, то всплывающее справа на нижнем элементе выстроится в линию.

Answer 3

Добавьте display:inline; к вашему классу .details и убедитесь, что содержащийся div является блочным элементом, а его фон установлен серым.

Синан.