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

Question

Come allineare il testo in modo che alcuni si allineano a sinistra e alcuni di essi si allineano a destra all'interno della stessa linea?

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

posso allineare tutto il testo a sinistra (oa destra), sia direttamente in linea, oppure 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 al a sinistra ea destra, mantenendolo sulla stessa linea?

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 emo:
http://jsfiddle.net/W3Pxv/1

Answer 3

HTML FILE:

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

file CSS:

.left 
{ 
    float: left; 
} 

.right 
{ 
    float: right; 
} 

e si è fatto ....

Answer 4

Se si vuole solo modificare l'allineamento del testo basta fare un corso

.left { 
text-align: left; 
} 

e abbracciare quella classe attraverso il testo

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

Answer 5

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

css:

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

Answer 6

Se non si desidera utilizzare gli elementi galleggianti e vuole fare in modo che entrambi i blocchi non lo fanno sovrapposizione, 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> 

Answer 7

Mentre molte delle soluzioni qui funzionerà, nessuno si sovrapporrà bene e finirà per spostare un oggetto sotto l'altro. Se stai provando a impaginare i dati che verranno associati dinamicamente, non saprai fino a quando runtime non sembrerà male.

Quello che mi piace fare è semplicemente creare una tabella a riga singola e applicare il galleggiante corretto sulla seconda cella. Non è necessario applicare un allineamento a sinistra sul primo, che avviene di default. Questo si sovrappone perfettamente con il word-wrapping.

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/

Answer 8

Aggiungi arco su ogni o gruppo di parole che si desidera allineare a sinistra oa destra. quindi aggiungere id o classe l'arco come ad esempio:

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

CSS-

#makeLeft{ 
float: left; 
} 

#makeRight{ 
float: right; 
}