Wenn man für eine Webseite eine Preisliste implementieren soll, steht man vor der Frage: Tabelle verwenden oder besser nicht. Wenn man den Artikel linksbündig und den Preis rechtsbündig anzeigen will, ist das so einfach erstmal nicht möglich. Klar, mit einer Tabelle geht es immer. Es geht aber auch ganz einfach mit zwei spans. Der Beispielcode zeigt es anhand einer Speisekarte eines italienischen Restaurants.
Der HTML-Code in Auszügen:
<span class="gericht">1. Pizza Margherita</span> <span class="preis">€ 4,50</span> <br>mit Tomatensoße und Käse
Und der zugehörige Bestandteil des Stylesheets.
preis { float: right; } .gericht, .preis { color: #7e1100; font-size: 1.25em; font-weight: bold; }
Und so sieht das Ganze dann im Browser aus:
So sollte es sein. Der Artikel, hier das Gericht, auf der linken Seite und der Preis auf der rechten Seite.