Come posso allineare il testo a sinistra e il testo a destra nella stessa riga?

102

Come posso allineare il testo in modo che una parte si allinei a sinistra e una parte si allinei a destra all'interno della stessa riga?

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

Posso allineare tutto il testo a sinistra (oa destra), direttamente in linea o utilizzando un foglio di stile -

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

Come posso allineare il testo corrispondente a sinistra ea destra, mantenendolo sulla stessa riga?

html css

— Sababoni
fonte

164

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

Espandi lo snippet

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

— Giona
fonte

1

text-align:left;dovrebbe essere float:left;come Left text Right Text

— Shylendra Madda

34

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

— Puyol
fonte

@mawg Anche se potrebbe essere, preferisco la risposta migliore perché non richiede css.

— Menasheh

4

Attualmente "in cima" o "più voti"? Entrambi possono cambiare, quindi non stai aiutando nessun futuro reaer :-) Comunque, mentre ho iniziato come te, con tutto lo stile in linea, ho presto capito che ci sono buone ragioni per separare contenuto e presentazione. CSS non fa paura e ci sono molti tutorial gratuiti in giro

— provaci

18

Se non vuoi usare elementi fluttuanti e vuoi assicurarti che entrambi i blocchi non si sovrappongano, prova:

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

Questa è l'unica risposta che ti consente di utilizzare più di due colonne, che era ciò di cui avevo bisogno. Probabilmente è un controllo più granulare di quello a cui importava l'OP.

— Kristen Hammack

9

FILE HTML:

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

FILE CSS:

.left
{
  float: left;
}

.right
{
  float: right;
}

e il gioco è fatto ....

— Osama Yawar Khawaja
fonte

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 e Promotore
fonte

7

Mentre molte delle soluzioni qui funzioneranno, nessuna si sovrappone bene e finirà per spostare un elemento sotto l'altro. Se stai tentando di impaginare i dati che saranno collegati dinamicamente, non saprai fino al runtime che sembra cattivo.

Quello che mi piace fare è semplicemente creare una tabella a riga singola e applicare il float destro sulla seconda cella. Non è necessario applicare un allineamento a sinistra sul primo, ciò avviene per impostazione predefinita. Queste maniglie si sovrappongono perfettamente con il wrapping delle parole.

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
fonte

Questo è quasi d'oro per me, ma hai idea del perché l'uso delle proprietà della tabella CSS rende le due celle fuori linea orizzontalmente? jsfiddle.net/7wddxks5/7 Non riesco a evitarlo .

— addMitt

1

In realtà, per me, dato che voglio che il testo giusto sia allineato a destra, questo sembra funzionare perfettamente se assegno semplicemente text-align: right e mi sbarazzo del float.

— addMitt

Non riuscivo nemmeno a capire perché stesse causando lo spostamento verticale. Ma sono riuscito a risolverlo con l'allineamento verticale. Ha anche inserito gli stili nelle classi per ripulire un po 'l'HTML. jsfiddle.net/o10ogqkd

— Eric Soyke

questa è una soluzione elegante qui. Penso che dovrebbe essere la risposta accettata in quanto impiega più creatività nell'utilizzo del tag table

— Rotimi

3

Aggiungi un intervallo su ogni o gruppo di parole che desideri allineare a sinistra oa destra. quindi aggiungi id o classe sull'intervallo come:

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

CSS-

#makeLeft{
float: left;
}

#makeRight{
float: right;
}

— Urvashi Gupta
fonte

2

Secondo le specifiche html, il tuo esempio dovrebbe usare una classe e non un ID.

— Sergio

0

Se stai usando Bootstrap prova questo:

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

-1

Se vuoi solo cambiare l'allineamento del testo, crea una classe

.left {
text-align: left;
}

e analizza quella classe attraverso il testo

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

— bntrns
fonte

3

Questa è metà della risposta alla domanda sugli allineamenti multipli per riga.

— TimZaman