Wie Sie über dem Doppelpunkt in jeder Zeile des Textes, wie Film-credits oft tun

Möchte ich richten Sie ein paar Zeile text über dem Doppelpunkt in jeder Zeile. Also ich habe diese:

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

Ich soll Ihnen ausrichten, die über den Doppelpunkt:

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

So weit ich es Schaffe mit einem Tisch und zwei Spalten, die linke Spalte text-align:right, und die Rechte Spalte-text-align-left. Aber ich bin so sicher, dass es viel elegantere Lösungen als diese. - Irgendwelche Ideen?

Dank!

  • Es klingt wie Sie tabellarische Inhalte. So eine Tabelle klingt wie eine vernünftige Lösung (IMO).
  • Eine Tabelle hier tun werden, da Sie den Umgang mit tabellarischen Daten. Tische haben Ihren Platz in design - nicht alles muss sein, Reine CSS-Dateien.
InformationsquelleAutor Nik So | 2012-03-27
  1. 12

    Einfach und semantische Möglichkeit wäre, verwenden Sie eine Definitionsliste:

    Demo

    CSS:

    dt { display:block; float:left; width:100px; text-align: right;}
dt:after{content:':';}
dd { display:block;}

    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>
    • Ich mag den semantischen Teil ein wenig Recht. also ich denke, die wichtigste Zutat ist mit text-align:right und width setzen für den text auf der linken Seite des Dickdarms.
    • Jeder Weg, um fügen Sie ein wenig mehr Platz rechts neben dem Doppelpunkt? Egal wo ich Leerzeichen einfügen, Ränder oder Polstern, es scheint nicht zu funktionieren. Es ist nur ein bisschen zu eng für meinen Geschmack.
    • padding-right: 1em;}
    InformationsquelleAutor bookcasey
  2. 3
    <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;
}

    Müssen Sie sicherstellen, dass alles, was umhüllt diese beiden Klassen hat genug Platz hier - 300px + irgendein padding oder margin.

    • Wenn Sie diesen Weg gehen, können Sie auch <dl>, <dt> und <dd> um eine korrekte semantische markup.
    • Das ist viel besser ... es ist Verschleierung zu verwenden <dl> die hat sich ganz anders bedienen und einfach zu Stil ist es Weg
    InformationsquelleAutor bobek
  3. 2

    Wenn Ihre Daten, tabellarische Daten, dann ist dein Ansatz mit der Verwendung von Tabellen ist eine zulässige.

    Jedoch eine alternative wäre die Verwendung von HTML-labels:

    <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;
}​

    Sehen fiddle: http://jsfiddle.net/F2PRN/1/

    • Mein Verständnis ist, dass die <label> - tag ist für den Gebrauch mit <input>s. Sie könnte genauso gut verwenden ein <span> statt.
    • Guter Punkt, habe ich aktualisiert meine Antwort. Ich denke, dass ich einfach mal für Etiketten, die entworfen, folgt Formularfelder
    InformationsquelleAutor Curt
  4. 1

    mit beliebigen Wert, der Länge, eine Tabelle wäre der einzige Weg, es zu tun

    • Nicht der einzige Weg, der einzige vernünftige Weg. 😉 Könnte auf jeden Fall erstellen Sie eine gefälschte Tabelle über divs und Javascript.
    • Ja aber dann sind Sie immer noch mit einem "Tisch", auch wenn es aus divs
    InformationsquelleAutor nathanjosiah
Schreibe einen Kommentar