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

102

Comment puis-je aligner le texte de sorte qu'une partie s'aligne à gauche et une partie à droite dans la même ligne?

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

Je peux aligner tout le texte à gauche (ou à 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 aligner le texte correspondant à gauche et à droite, tout en le gardant sur la même ligne?

html css

— Sababoni
source

164

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

Développer l'extrait

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

— Giona
source

1

text-align:left;il devrait float:left;ressembler à Texte de gauche Texte de droite

— Shylendra Madda

34

HTML:

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

css:

.right{
    float:right;
}

.left{
    float:left;
}

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

— Puyol
source

@mawg Bien que cela puisse être, je préfère la réponse principale car elle ne nécessite pas de css.

— Menasheh

4

Actuellement "en tête" ou "la plupart des votes"? Les deux peuvent changer, donc vous n'aidez aucun futur lecteur :-) Quoi qu'il en soit, alors que j'ai commencé comme vous, avec tous les styles en ligne, je me suis vite rendu compte qu'il y avait de bonnes raisons de séparer le contenu et la présentation. CSS n'est pas effrayant et il y a beaucoup de tutoriels gratuits autour - allez-y

— Mawg dit de réintégrer Monica

18

Si vous ne souhaitez 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>

— Jack Miller
source

C'est la seule réponse qui vous permet d'utiliser plus de deux colonnes, ce dont j'avais besoin. C'est probablement un contrôle plus granulaire que l'OP ne le souhaitait.

— Kristen Hammack

9

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é ...

— Osama Yawar Khawaja
source

7

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

css:

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

— Web Designer cum Promoteur
source

7

Bien que plusieurs des solutions ici fonctionnent, aucune ne se chevauche bien et finit par déplacer un élément en dessous de l'autre. Si vous essayez de mettre en page des données qui seront liées dynamiquement, vous ne saurez pas avant l'exécution que cela semble mauvais.

Ce que j'aime faire, c'est simplement créer un tableau à une seule ligne et appliquer le flotteur droit sur la deuxième cellule. Pas besoin d'appliquer un alignement à gauche sur le premier, cela se produit par défaut. Ces poignées se chevauchent parfaitement par habillage de mots.

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/

— Eric Soyke
source

C'est presque de l'or pour moi, mais une idée de la raison pour laquelle l'utilisation des propriétés de la table CSS rend les deux cellules hors ligne horizontalement? jsfiddle.net/7wddxks5/7 Je n'arrive pas à le contourner.

— addMitt

1

En fait, pour moi, puisque je veux que le bon texte soit aligné à droite, cela semble fonctionner parfaitement si j'attribue simplement text-align: right et que je me débarrasse du flottant.

— addMitt

Je ne pouvais pas non plus comprendre pourquoi cela provoquait le déplacement vertical. Mais j'ai pu le réparer avec l'alignement vertical. Également tiré les styles dans les classes pour nettoyer un peu le HTML. jsfiddle.net/o10ogqkd

— Eric Soyke

c'est une solution élégante ici. Je pense que cela devrait être la réponse acceptée car elle utilise plus de créativité dans l'utilisation de la balise de table

— Rotimi

3

Ajoutez une étendue sur chaque ou groupe de mots que vous souhaitez aligner à gauche ou à droite. puis ajoutez un identifiant ou une classe sur le span tel que:

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

CSS-

#makeLeft{
float: left;
}

#makeRight{
float: right;
}

— Urvashi Gupta
source

2

Selon les spécifications html, votre exemple doit utiliser une classe et non un ID.

— Sergio

0

Si vous utilisez Bootstrap, essayez ceci:

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

— Adrian Chrostowski
source

-1

Si vous souhaitez simplement modifier l'alignement du texte, créez simplement des classes

.left {
text-align: left;
}

et couvrir cette classe à travers le texte

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

— bntrns
source

3

C'est la moitié de la réponse à la question des alignements multiples par ligne.

— TimZaman