Wie an den Doppelpunkt in jeder Textzeile wie Film-Credits ausrichten oft tun

Ich möchte ein paar Zeilen Text über den Doppelpunkt in jeder Zeile ausrichten. So habe ich dies:Wie an den Doppelpunkt in jeder Textzeile wie Film-Credits ausrichten oft tun

aaa:111 
bbbbbbb:22222 
cccccccccc:33333333 
dd:44 
eeee:5555

ich sie will über den Doppelpunkt auszurichten:

 aaa:111 
    bbbbbbb:22222 
cccccccccc:33333333 
     dd:44 
     eeee:5555

Bisher habe ich es mit einem Tisch verwalten und zwei Spalten des linken Spalte text-align: right, und die rechte Spalte Text-Ausrichtung nach links. Aber ich bin mir sicher, dass es viel elegantere Lösungen als diese gibt. -- Irgendwelche Ideen?

Danke!

Quelle

2012-03-27 Nik So

Es klingt wie Sie tabellarischen Inhalt haben. So klingt ein Tisch wie eine vernünftige Lösung (IMO). –

Eine Tabelle reicht hier aus, da es sich um tabellarische Daten handelt. Tische haben ihren Platz im Design - nicht alles muss pures CSS sein. –

Eine einfache und semantische Weg, um eine Definition zu verwenden Liste wäre:

Demo

CSS:

HTML:

<dl> 
    <dt>aaa</dt><dd>111</dd> 
    <dt>bbbbbbb</dt><dd>22222</dd> 
    <dt>cccccccccc</dt><dd>33333333</dd> 
    <dt>dd</dt><dd>44</dd> 
    <dt>eeee</dt><dd>5555555</dd> 
</dl>

Quelle

2012-03-27 14:29:55 bookcasey

Ich mag den semantischen Teil ziemlich. also denke ich, dass die Hauptkomponente text-align hat: right und width für den Text links vom Doppelpunkt. –

Irgendeine Möglichkeit, etwas mehr Platz rechts vom Doppelpunkt hinzuzufügen? Egal wo ich Leerzeichen, Ränder oder Paddings hinzufüge, es scheint nicht zu funktionieren. Es ist nur ein bisschen zu eng für meinen Geschmack. –

@Rokk 'dt: nach {content: ':'; padding-right: 1em;} ' – bookcasey

mit beliebigen Wert Länge, ein Tisch wäre der einzige Weg, es zu tun

Quelle

2012-03-27 14:21:44 nathanjosiah

Nicht der einzige Weg, nur der einzig gesunde Weg. ;) Könnte definitiv einen gefälschten Tisch mit 'div's und Javascript erstellen. –

Ja, aber Sie verwenden immer noch eine "Tabelle", auch wenn sie aus divs besteht – nathanjosiah

<div class="label-wrap">aaa:</div> 
<div class="info">111</div>

CSS:

.label-wrap 
{ 
width:150px; 
text-align:right; 
float:left; 
} 

.info 
{ 
width:150px; 
float:left; 
text-align:left; 
}

Sie müssen sicherstellen, dass das, was diese beiden Klassen wickelt hier genug Platz hat, - 300px + jede Polsterung oder Marge.

Quelle

2012-03-27 14:23:37

Wenn Sie diesen Weg gehen, können Sie '

' und ': ' verwenden, um eine korrekte semantische Markierung zu erhalten. – Cyrille

Dies ist viel besser ... es ist verschleiern zu verwenden

, die ganz andere Verwendung hat und nur um es weg zu stylen – user2846569

Wenn es sich bei Ihren Daten um Tabellendaten handelt, ist Ihr Ansatz bei der Verwendung von Tabellen akzeptabel.

Allerdings wäre eine Alternative HTML-Etiketten zu verwenden:

<p> 
<span>aaa:</span>111 
</p> 
<p> 
<label>bbbbbbb:</span>22222 
</p> 
<p> 
<span>cccccccccc:</span>33333333 
</p> 

span 
{ 
    width:100px; 
    clear:left; 
    float:left; 
    text-align:right; 
    padding-right:2px; 
}

Siehe Geige: http://jsfiddle.net/F2PRN/1/

Quelle

2012-03-27 14:25:55 Curt

Mein Verständnis ist, dass der '' Tag ist für den Einsatz mit' 's gedacht. Sie können stattdessen auch einfach '' verwenden. – chipcullen

@chipcullen Guter Punkt, ich habe meine Antwort aktualisiert. Ich denke, ich wählte einfach Etiketten, da die entworfenen Formularfelder – Curt

Wie an den Doppelpunkt in jeder Textzeile wie Film-Credits ausrichten oft tun

Antwort

Verwandte Themen