HTML/CSS: wie kann man text rechts und Links ausgerichtet in einem Absatz

Was wäre der beste code, um zwei bits von text in einem einzigen Absatz, eine Linksbündig, die andere Rechtsbündig, auch ist:

  • die am wenigsten code wie möglich
  • die einfachste Möglichkeit für Kunden zu erbringen (d.h. mit geringsten Ressourcen)

Füge ich diesem letzten, zum sicher zu sein <table><tr><td></td><td align=right></td></tr></table> bekommen würde, ausgeschlossen. Dies ist nicht nur ein Tier von code im Vergleich zu ein paar richtig gestylt <div>, <span> oder <p>'s, es ist auch eine Bestie, wenn du weißt, was eine HTML-render-engine zu laden und zu berechnen, um zu entscheiden, auf die Zellgröße, bevor es selbst zur Malerei, text...

Wenn du nicht sicher bist was ich meine, hier ein Beispiel: eine Fußzeile mit Links ausgerichtet wird der name des aktuell angemeldeten Benutzers, und in der gleichen Zeile Rechtsbündig das aktuelle Datum und Zeit und/oder website-version.

statt sorgen über einige Mikrosekunden für die Wiedergabe verwendet wird wäre es nicht besser, sich mit schönen, semantisch korrekte markup zur Unterstützung von text-Browser, Screenreader und eine mögliche bessere search-engine-rating?
nicht statt, ich denke, es ist beides wichtig, also es wäre auch schön, erscheinen Links und rechts in den HTML-code in der gleichen Reihenfolge.

InformationsquelleAutor Stijn Sanders | 2010-10-27

  1. 26

    Wenigsten markup möglich (Sie benötigen nur eine Spanne):

    <p>This text is left. <span>This text is right.</span></p>

    Wie Sie erreichen wollen das Links - /rechts-Stilen ist es bis zu Ihnen, aber ich würde empfehlen eine externe style auf eine ID oder eine Klasse.

    Den vollständigen HTML:

    <p class="split-para">This text is left. <span>This text is right.</span></p>

    Und CSS:

    .split-para      { display:block;margin:10px;}
.split-para span { display:block;float:right;width:50%;margin-left:10px;}
    das ist merkwürdig, ein <span> und, es zwingen, in display:block haben, warum nicht verwenden <div><div>? (hihi: en.wikipedia.org/wiki/Divi-divi )
    Da diese semantisch. Sie teilen möchten, auf einem Absatz, so dass ich vorschlagen, mit einem Absatz-element. Sie können nicht nur ein block-element wie ein div innerhalb eines Absatzes, als wäre ungültig. Also <p><span></span></p> ist die beste markup.
    Eigentlich jetzt, dass ich meine AUFMERKSAMKEIT ich sehen, dass du eigentlich nicht aufteilen eines Absatzes! So ein div wäre besser!

    InformationsquelleAutor Stephen

  2. 6

    Die nur halbwegs richtige Weg, dies zu tun ist

    <p>
  <span style="float: right">Text on the right</span>
  <span style="float: left">Text on the left</span>
</p>

    jedoch, diese erhalten Sie in Schwierigkeiten, wenn der text überläuft. Wenn Sie können, verwenden Sie divs (block-level-Elemente), und geben Sie Ihnen einen festen width.

    Einer Tabelle (oder eine Reihe von divs mit der nach display: table /table-row /table-cell Eigenschaften) wäre in der Tat die sicherste Lösung für dieses - wird es unmöglich sein, zu brechen, selbst wenn Sie viele schwierige Inhalte.

    +1 für Tisch-Lösung

    InformationsquelleAutor Pekka 웃

  3. 4

    Ich würde es nicht in der gleichen <p>, da IMHO die beiden infos sind semantisch zu Verschieden. Wenn es sein muss, würde ich vorschlagen, diese:

    <p style="text-align:right">
 <span style="float:left">I'll be on the left</span>
 I'll be on the right
</p>
    Genau. Sie sind nicht die gleichen Absatz.
    Perfekte Lösung. Danke Mann!

    InformationsquelleAutor Boldewyn

  4. 1

    Habe ich dieses in der Vergangenheit:

    html

    January<span class="right">2014</span>

    Css

    .right {
    margin-left:100%;
}

    Demonstration

    InformationsquelleAutor Chips147

  5. 0

    HTML/CSS: wie kann man text rechts und Links ausgerichtet in einem Absatz

    Wenn die Texte hat verschiedenen Größen und Sie müssen Unterstrichen das ist die Lösung:

    <table>
  <tr>
    <td class='left'>January</td>
    <td class='right'>2014</td>
  </tr>
</table>

    css:

    table{
    width: 100%;
    border-bottom: 2px solid black;
    /*this is the size of the small text's baseline over part  (≈25px*3/4)*/
    line-height: 19.5px; 
}
table td{
    vertical-align: baseline;
}
.left{
    font-family: Arial;
    font-size: 40px;
    text-align: left;

}
.right{
    font-size: 25px;
    text-align: right;
}

    demo hier

    Ich speziell zu tun nicht wollen, <table> auch <p>L<span>R</span></p> Lösung erlaubt es auch, mich um eine andere Schriftgröße.
    Erreichen Sie mit dieser Lösung unterschiedliche Schriftgrößen auf der selben Basis?

    InformationsquelleAutor

Schreibe einen Kommentar