Wie kann ich Text links und Text rechts in derselben Zeile ausrichten?

Wie kann ich Text so ausrichten, dass ein Teil davon links und ein Teil rechts in derselben Zeile ausgerichtet ist?

<p>This text should be left-aligned. This text should be right aligned.</p> 

Ich kann den gesamten Text links (oder rechts) ausrichten, entweder direkt inline oder mithilfe eines Stylesheets.

<p style='text-align: left'>This text should be left-aligned. 
    This text should be right aligned.</p>

Wie kann ich den entsprechenden Text links und rechts ausrichten, während ich ihn in derselben Zeile halte?

<p style="text-align:left;">
    This text is left aligned
    <span style="float:right;">
        This text is right aligned
    </span>
</p>

https://jsfiddle.net/gionaf/5z3ec48r/

HTML:

<span class="right">Right aligned</span><span class="left">Left aligned</span>​

CSS:

.right{
    float:right;
}

.left{
    float:left;
}

Demo:
http://jsfiddle.net/W3Pxv/1

Wenn Sie keine schwebenden Elemente verwenden möchten und sicherstellen möchten, dass sich beide Blöcke nicht überlappen, versuchen Sie Folgendes:

<p style="text-align: left; width:49%; display: inline-block;">LEFT</p>
<p style="text-align: right; width:50%;  display: inline-block;">RIGHT</p>

HTML-DATEI:

<div class='left'> Left Aligned </div> 
<div class='right'> Right Aligned </div>

CSS-DATEI:

.left
{
  float: left;
}

.right
{
  float: right;
}

und du bist fertig ....

<h1> left <span> right </span></h1>

CSS:

h1{text-align:left; width:400px; text-decoration:underline;}
span{float:right; text-decoration:underline;}

Während einige der hier beschriebenen Lösungen funktionieren, überlappen sich keine gut und verschieben ein Element unter das andere. Wenn Sie versuchen, Daten zu gestalten, die dynamisch gebunden werden, wissen Sie erst zur Laufzeit, dass sie schlecht aussehen.

Was ich gerne mache, ist einfach eine einzelne Zeilentabelle zu erstellen und den richtigen Float auf die zweite Zelle anzuwenden. Es ist nicht erforderlich, beim ersten Mal eine Linksausrichtung anzuwenden, dies geschieht standardmäßig. Diese Griffe überlappen sich perfekt durch Zeilenumbruch.

HTML

<table style="width: 100%;">
  <tr><td>Left aligned stuff</td>
      <td class="alignRight">Right aligned stuff</td></tr>
</table>

CSS

.alignRight {
  float: right;
}

https://jsfiddle.net/esoyke/7wddxks5/

Fügen Sie jedem Wort oder jeder Gruppe von Wörtern, die Sie links oder rechts ausrichten möchten, eine Spanne hinzu. Fügen Sie dann ID oder Klasse in den Bereich ein, z.

<h3>
<span id = "makeLeft"> Left Text</span>
<span id = "makeRight"> Right Text</span>
</h3>

CSS-

#makeLeft{
float: left;
}

#makeRight{
float: right;
}

Wenn Sie Bootstrap verwenden, versuchen Sie Folgendes:

<div class="row">
    <div class="col" style="text-align:left">left align</div>
    <div class="col" style="text-align:right">right align</div>
</div>

Wenn Sie nur die Ausrichtung von Text ändern möchten, erstellen Sie einfach eine Klasse

.left {
text-align: left;
}

und spanne diese Klasse durch den Text

<span class='left'>aligned left</span>