Wyrównanie postaci - css

W moich informacjach kontaktowych mam kilka linii wyglądających tak.

Phone: 123 456
Web site: page.eu

Chciałbym stworzyć pionowe wyrównanie nadśredniki. Jednym ze sposobów na to, jak sądzę, jest użycie dwóch różnych elementów div, unoszenie ich w lewo i ustawienie zawartości jednego, wyrównanie do prawej i wyrównanie do lewej. Czy jest jednak jakiś lepszy sposób?

Odpowiedzi:

Naprawiono szerokość pływających elementów div lub tabel (ale nie chwal się tym, ponieważ nie jest to najlepsza metoda)

http://jsfiddle.net/pXScG/3/

Ponieważ wydaje się, że jest to lista informacji kontaktowych, sugeruję najpierw użycie elementu list, a następnie dwóch rozpiętości i wyrównanie tekstu:

<ul id="contact">
<li><span class="contactMethod">Phone</span>:<span class="contactInfo">123 456</span></li>
<li><span class="contactMethod">Web site</span>:<span class="contactInfo">page.eu</span></li>
</ul>

Z CSS:

span {
display: inline-block;
}

span.contactMethod {
width: 30%;
text-align: right;
}

span.contactInfo {
width: 65%;
text-indent: 0.5em;
}​

Demo JS Fiddle.

W tym przykładzie nie ma żadnych średników (;); jaZakładam, że masz na myśli dwukropki (:). To, co masz, to tabela danych, więc tabela HTML jest tutaj najbardziej odpowiednią strukturą i daje pożądane renderowanie, jeśli po prostu wyrównasz pierwszą kolumnę. Jednak najlepiej ustawić również paddings:

<style>
th { text-align: right; font-weight: normal;  padding-right: 0.3em; }
</style>
<table>
<tr><th>Phone: <td>123 456
<tr><th>Web site:<td>page.eu
</table>