Zwei Zeilen bündig machen (Nicht proportionale Schrift)

[mannyk]

Hallo,

ich habe folgende zwei Zeilen:

Telefon: xxxxxxx
Fax: xxxxxx

Nun, möchte ich die Nummern untereinander bündig machen, etwa so:

Telefon: xxxxxx
Fax: ____xxxxxx

Wie kann ich soetwas pixelgenau hinbekommen?
Anders als im obigen Beispiel ist die Schrift nicht proportional (die Zeichen sind nicht alle gleich breit).
Danke und viele Grüße,
mannyk

 

[NE4Y]

mit ner tabelle und nem entsprechenden text-align wäre das möglich.

 

[Programmierer2013]

Theoretisch kannst du das auch mit CSS Floaten ...

 

[T4k3C4r3]

Theoretisch kannst du das auch mit CSS Floaten ...

Wo bei es mit ner Tabelle deutlich origineller umzusetzen wäre ;)

 

[Tronjer]

mit ner tabelle und nem entsprechenden text-align wäre das möglich.

Tabellenlayout ist ein no-go.

Lösungansatz:

Zwei Textblöcke, die mit float: left oder display: inline-block ausgerichtet werden. Falls die Telefon- und Faxnummer im rechten Block unterschiedlich lang sind und trotzdem als Blocksatz formatiert werden sollen, könnte man innerhalb der Zeile spans einfügen und diesen per CSS ein letter-spacing zuweisen.

 

[T4k3C4r3]

Tabellenlayout ist ein no-go.

Lösungansatz:

Zwei Textblöcke, die mit float: left oder display: inline-block ausgerichtet werden. Falls die Telefon- und Faxnummer im rechten Block unterschiedlich lang sind und trotzdem als Blocksatz formatiert werden sollen, könnte man innerhalb der Zeile spans einfügen und diesen per CSS ein letter-spacing zuweisen.

Wozu gibt es dann eig noch Tabellen ?

 

[Tronjer]

Zum Beispiel zur Ausgabe tabellarischer Daten mittels Datenbank-Query und foreach-Schleife.

 

[mannyk]

Danke für eure Antworten. Habe mich nun entschlossen es so zu machen:

<div style="width:300px;float:left;">test1: </div><div style="float:left;">1234</div><div style="clear:both;"></div>
<div style="width:300px;float:left;">test1234: </div><div style="float:left;">1234</div>

 

[threadi]

Statt den <div> würde ich empfehlen ein <p> um jede Zeile zu legen und die beiden Bestandteile der Zeile mit <span> zu umgeben, welches dann gefloatet wird. Das wäre semantisch sauberer.

 

[Max T.]

Statt den <div> würde ich empfehlen ein <p> um jede Zeile zu legen und die beiden Bestandteile der Zeile mit <span> zu umgeben, welches dann gefloatet wird. Das wäre semantisch sauberer.

Ja das stimmt, sonst wird die ganze Seite wieder eine "div-Suppe". Wobei ich hier ehrlich gesagt zu einer Tabelle gegriffen hätte. Klar, die komplette Seite mit ner Tabelle zu gestalten is nix, aber selbst Seiten wie Facebook verwenden für solch kleinere Dinge immer noch Tabellen...

 

[NE4Y]

Ja das stimmt, sonst wird die ganze Seite wieder eine "div-Suppe". Wobei ich hier ehrlich gesagt zu einer Tabelle gegriffen hätte. Klar, die komplette Seite mit ner Tabelle zu gestalten is nix, aber selbst Seiten wie Facebook verwenden für solch kleinere Dinge immer noch Tabellen...

sehe ich genauso