Comment puis-je aligner du texte à gauche et du texte à droite sur la même ligne ?

Question

Comment aligner le texte de manière à ce qu'une partie soit alignée à gauche et une autre à droite sur la même ligne ?

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

Je peux aligner tout le texte vers la gauche (ou vers la droite), soit directement en ligne, soit en utilisant une feuille de style.

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

Comment puis-je aligner le texte correspondant à gauche et à droite, tout en le gardant sur la même ligne ?

Answer 1

<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/

Answer 2

HTML :

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

css :

.right{
    float:right;
}

.left{
    float:left;
}

Démonstration :
http://jsfiddle.net/W3Pxv/1

Answer 3

Si vous ne voulez pas utiliser d'éléments flottants et que vous voulez vous assurer que les deux blocs ne se chevauchent pas, essayez :

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

Answer 4

Une réponse utilisant css flex layout et justify-content

p {
  display: flex;
  justify-content: space-between;
}

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

Answer 5

FICHIER HTML :

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

FICHIER CSS :

.left
{
  float: left;
}

.right
{
  float: right;
}

et vous avez terminé ....